如何在反应头盔中预加载最大内容的绘画图像 [英] How to preload largest-contentful-paint image in react helmet

问题描述

我在灯塔里收到了这个警告

I received this warning in lighthouse

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

I tried doing what that learn more link told me to do, and include a preload tag in the head for the image, but I still get the warning

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

I tried this preload tag, the url is the one which is in the browser when I right click the image and select "open in new tab"

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

图像只是像 import banner from "images/banner-large.png" 一样导入到 jsx 组件中，然后使用像 <img src= 这样的图像标签进行渲染{example} className="w-100 banner-img";alt=说明"/>

The image is just imported into the jsx component like import banner from "images/banner-large.png"; and then rendered with an image tag like <img src={example} className="w-100 banner-img" alt="Description" />

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

I'm also using img-optimizer-loaderto web-optimize my images and convert them to webp in my webpack config like below

{
    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]",
        },
      },
    ],
  },

---

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

---

It's worth noting that I import my images like

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

但是由于img-optimize-loader，我所有的图片在构建中都被转换为webp，而webp图片是显示出来的.

but because of img-optimize-loader, all my images are converted to webp in the build, and the webp images are the ones displayed.

推荐答案

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

Import and use Helmet right inside your image component:

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


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

这篇关于如何在反应头盔中预加载最大内容的绘画图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！