reactjs - 如何在反应头盔中预加载最大内容绘制图像

Question

我在灯塔收到了这个警告

我尝试按照了解更多链接告诉我的操作，并在图像的头部包含一个预加载标签，但我仍然收到警告

---

我尝试了这个预加载标签，当我右键单击图像并选择“在新标签页中打开”时，该网址是浏览器中的那个标签

<link rel="preload" as="image" href={`https://example.com:8080/src/assets/images/example.webp`} />

图像只是导入到 jsx 组件中import banner from "images/banner-large.png";，然后使用图像标签呈现 <img src={example} className="w-100 banner-img" alt="Description" />

---

我还用于img-optimizer-loader对我的图像进行网络优化，并将它们转换为我的 webpack 配置中的 webp，如下所示

{
    test: /\.(gif|png|jpe?g|webm|webp)$/i,
    use: [
      {
        loader: "img-optimize-loader",

        options: {
          compress: {
            // This will transform your png/jpg into webp.
            webp: {
              quality: 75,
            },
            disableOnDevelopment: true,
          },
          name: "[path][name].[ext]",
        },
      },
    ],
  },

---

值得注意的是，我导入了我的图像

import image from 'src/assets/images/example.png'

但是由于img-optimize-loader，我所有的图像都在构建中转换为 webp ，并且 webp 图像是显示的图像。

标签： reactjswebpackpreloadlighthousereact-helmet

Answer 1

Helmet在您的图像组件中导入和使用：

import { Helmet } from 'react-helmet'
import example from "images/example.png";


function Image () {
  return (
    <Helmet>
      <link rel="preload" as="image" href={example}>
    </Helmet>
  )
}