我可以在图片元素中获得img的naturalWidth吗？

Question

el.naturalWidth应返回图片的宽度。当我制作像这样的图片元素时：

console.log(document.getElementById('original'))
console.log(document.getElementById('original').naturalWidth)

    <picture>
    <source srcSet='http://placehold.it/350x350' id='alt' media='(max-width: 50000px)' />
    <img src='http://placehold.it/500x500' id="original" />
</picture>

    

并在小屏幕上运行它，它输出正确的元素，但源图像的宽度，为什么？我能做些什么呢？

Answer 1

仅基于提供的代码不清楚，但尝试确保已加载图像。如下例子：

HTML

<picture>
    <source srcSet='http://placehold.it/350x350' id='alt' media='(max-width: 50000px)' />
    <img id="original" />
</picture>

JS

var img_obj = new Image();
img_obj.src = 'http://placehold.it/500x500';
img_obj.onload = function(){
  document.getElementById('original').src = img_obj.src;
  console.log(img_obj.naturalWidth);
  console.log(document.getElementById('original').getBoundingClientRect().width)
};

同时尝试使用document.getElementById('original').getBoundingClientRect().width作为<img>元素的宽度。