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

Question

我使用 picture 标签默认加载 webp 图像，如果 webp 无法加载，则使用 jpg 图像。我就是这样做的(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）还是我错了？

Answer 1

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

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

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

Using picture tag in React without loading excessive amounts of data in the browser

reactjs

image

webp