Javascript 获取图像的宽度和高度。src是代理

我有一个Vue组件，其中有一个img，我需要得到图像的尺寸，最好是在显示图像之前（以适应容器的宽度或高度）

该代码可能无法工作，映像src可以返回401（还不确定），我们使用代理并从服务器上的存储桶中获取该文件。比如/api/getStorageResource？blob=

我能做什么

有了链接，我可以通过axios获取图像并将其设置为元素，而不是

---

作为一个选项，我看到我可能可以让元素保持现在的状态

，然后getElementById它并获得宽度和高度。。。不确定我在这里的选项是什么。

您可以使用和块内的组合从服务器获取图像URL，然后继续创建

，最后将容器的
宽度和
高度设置为等于img元素的宽度和高度

在下面的示例代码段中，我添加了一个按钮，该按钮将在单击时将图像添加到容器中，这样您就可以在DOM上呈现图像之前看到容器如何具有检索到的图像维度：


const imgDiv=document.querySelector（'#imgDiv'）；
const btn=document.querySelector（'imgBtn'）；
//fetchImg函数将从服务器获取图像URL，如果未找到文件，则将错误记录到控制台
const fetchImg=async（）=>{
试一试{
//将以下示例url替换为“this.payload.src”
const imgURL=等待取数（'https://picsum.photos/id/237/200/200');
返回图像；
}捕捉（错误）{
//如果找不到图像，请在此处执行操作
log（'Image not found！'）；
} 
}
fetchImg（）。然后（（res）=>{
//创建一个新的image元素，URL作为src
const img=新图像（）；
img.src=res.url；//根据从服务器获取的数据的结构更改“.url”
//将检索到的img宽度和高度分配给容器
img.addEventListener（'load'，（）=>{
imgDiv.style.width=img.naturalWidth+'px'；
imgDiv.style.height=img.naturalHeight+‘px’；
});
btn.addEventListener（'click'，（）=>imgDiv.appendChild（img））；
});
html，正文{边距：0；填充：10px；宽度：100%；高度：100%；文本对齐：居中；}
#imgDiv{背景色：#222；边距：0自动；}
添加图像
我不完全理解你的问题。您的问题是，某些图像可能返回401错误，因此您无法获取图像大小，或者您正在寻找获取图像大小的方法？
this.img = new Image();
this.img.src = this.payload.src;
this.img.onload = () => {
  let width = this.img.naturalWidth;
  let height = this.img.naturalHeight;
}