确定反应 Material-ui CardMedia 的图像文件大小

Question

晚上好，我在 React 功能组件中使用了一个 material-ui Card，其中有一个 CardMedia，例如：<CardMedia  className={classes.media}  image={props.image}  title={props.cardTitle}/>我正在尝试确定以字节为单位的图像文件大小。经过一些研究，我找到了使用 XMLHttpRequest 的解决方案。再次下载文件对我来说似乎很奇怪。我找到了如何使用以下方法获取图像的宽度和高度：function checkImage() {    var img = new Image();    img.addEventListener("load", function(){        console.log( this.naturalWidth +' '+ this.naturalHeight );    });    img.src = props.image;}它有效，但这不是我要找的，如果我没记错的话，它会再次下载图像。我查看了 Mozilla 文档，Image只有宽度和高度属性。由于图像已经加载，我应该有一种方法可以在不使用 XMLHttpRequest 的情况下确定其字节大小吗？

Answer 1

#1：您可以通过如下请求 获取Content-Length资源的标头：HEAD

fetch('https://your-domain/your-resource', { method: 'HEAD' })

  .then(r => console.log('size:', r.headers.get('Content-Length'), 'bytes'));

这样只下载标题，仅此而已。

#2：或者，您可以使用Resource Timing API：

const res = performance.getEntriesByName('https://your-domain/your-resource');

console.log(res[0].transferSize, res[0].encodedBodySize, res[0].decodedBodySize);

请注意，资源需要位于同一子域中，否则您将必须添加Timing-Allow-OriginCORS 标头。

#3：另一种选择是将图像下载为 blob：

fetch('https://your-domain/your-resource')

  .then(r => r.blob())

  .then(b => console.log(b.size, URL.createObjectURL(b)));

如果在初始加载后调用，这当然会重新下载图像，但如果最初使用此方法加载图像，则可以使用对象 URL 来引用图像。