reactjs - 在 React 中使用图片标签而不在浏览器中加载过多的数据

Question

我默认使用picture标签加载webp图像，jpg如果webp无法加载则使用图像。我就是这样做的（也在代码和框上）

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）还是我错了？

标签： reactjsimagewebp

Answer 1

您正在导入两个图像，但浏览器请求了第二个图像jake-the-dog.webp，我使用网络选项卡验证了这一点：

如果图片jake-the-dog.webp加载失败，浏览器会请求第一张图片jake-the-dog.jpg