确定反应 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资源的标头：HEADfetch('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 来引用图像。