如何解决在 React 中使用图片标签而不会在浏览器中加载过多的数据
默认情况下,我使用 picture
标签加载 webp
图像,如果 jpg
无法加载,则使用 webp
图像。这就是我的做法 (also on codesandbox)
import jpg from "./jake-the-dog.jpg";
import webp from "./jake-the-dog.webp";
export default () => (
<div>
<h1>Hello CodeSandbox</h1>
<picture>
<source srcSet={webp} type="image/webp" />
<img src={jpg} type="image/jpg" />
</picture>
</div>
);
这个方法让我担心的是,我将两个图像都导入到组件中,所以这是否意味着我导入的数据量几乎是原来的两倍? (jpg 和 webp)还是我错了?
解决方法
您正在导入两个图像,但浏览器请求了第二个图像 jake-the-dog.webp
,我使用网络选项卡验证了这一点:
如果图片 jake-the-dog.webp
加载失败,浏览器将请求第一张图片 jake-the-dog.jpg
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。