创建React App忽略图片元素源/ srcSet？答案

【问题标题】：Create React App ignoring picture element source / srcSet?创建React App忽略图片元素源/ srcSet？
【发布时间】：2020-11-06 20:50:37
【问题描述】：

我正在使用带有后备选项的 webp 的图片元素约定。在 Create React App 中生成时 - 只有默认的 img 元素 src 会在浏览器中呈现。我已经切换了图片源标签的顺序来测试以及 Chrome、Firefox 和 IE 中的 img src，在桌面和移动设备上。

const ext_1 = ".jpg";
const ext_2 = ".webp";
....
<picture>
    <source srcSet={img.src + ext_2} type='image/webp'></source>
    <source srcSet={img.src + ext_1} type='image/jpeg'></source>
        <img
            className={img.className}
            id={img.id}
            src={img.src + ext_1}
            alt={img.alt}
            title={img.title}
        />
</picture>

我已经阅读了所有我能找到的关于 React 和图像的帖子/cmets - 似乎没有一个可以直接适用，甚至通过 cmets 阅读...我正在考虑使用“imbroisi/medium-react-webp”，但我'想尽可能多地避免对 SPA 项目的依赖，我只是想减少加载时间。任何帮助将不胜感激。

【问题讨论】：

这是强制的，你需要使用图片标签吗？
在 React 之外，这是我为带有后备源的 webp 找到的最佳解决方案 - 此外，当图片标签不受支持时，img 标签用作后备。 ...但是，否则，没有。
是否可以直接将 srcSet 与 img 标签一起使用，即使它不用于响应式交换？它还会根据文件类型进行切换吗？
此人遇到了类似的问题，但提出了关于延迟加载的不同问题：stackoverflow.com/questions/57061875/…

标签： reactjs image create-react-app

【解决方案1】：

找到这个答案：

浏览器 devtools 将始终认为图像具有您最初提供的任何 src。如果您在元素窗格中检查它，您会看到它使用 .jpg。

要检查它是否真的有效，我发现的最佳技巧是右键单击并“另存为...”。在 Chrome 上，您应该获得“Google WebP”文件格式，而在 Safari 或 IE 上，您应该获得“JPEG”。

在这篇文章中： https://joshwcomeau.com/performance/embracing-modern-image-formats/

这似乎是真的。但是，Google PageSpeed 仍会显示默认图像，随后会降低速度……这可能是由于预加载了它们？

【讨论】：