反应预加载图像答案

【问题标题】：React preload image反应预加载图像
【发布时间】：2022-01-26 02:58:25
【问题描述】：

在 React 中，是否可以预加载通过 JS 导入导入的图像？

我想要一种方法来结合我的 js 文件中的以下内容

import image from './image.svg';

以及我的 index.html 文件中的以下内容

<link 
        rel="preload"
        as="image"
        href="???/image.svg"
/>

【问题讨论】：

这能回答你的问题吗？ How to preload images in React.js?
那里提出的解决方案似乎通过 ComponentDidMount 或类似方法涉及 React 本身。使用这样的方法意味着图像只有在 React 本身被加载后才能很好地加载。我希望它尽快加载，因此为什么要使用 HTML 头部的链接。
我建议使用 react-helmet 并检查这个问题stackoverflow.com/a/67677453

标签： reactjs

【解决方案1】：

我不知道 create-react-app 怎么样，但如果你使用自己的 webpack 设置，你可以尝试类似：

  plugins: [

    new HtmlWebpackPlugin({
      ...
    }),
    new HtmlWebpackInjectPreload({
      files: [
        {
          match: /(filename)+.+(\.webp|\.png)$/,
          attributes: { as: 'image' },
        }
      ],
    }),
  ]

如果你使用的是HtmlWebpackPlugin，可以试试HtmlWebpackInjectPreload插件，它是第一个插件的扩展。它将查找输出的资产名称，并根据这些发现将链接注入头部。

https://github.com/principalstudio/html-webpack-inject-preload

【讨论】：

【解决方案2】：

你可以像这样使用你导入的图片

<img src={image}/>

由于您导入图像，它将与文档一起加载。

【讨论】：