时间戳

首页 > 解决方案 > 反应预加载图像

reactjs - 反应预加载图像

问题描述

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

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

import image from './image.svg';

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

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

标签： reactjs

解决方案

我不知道 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

推荐阅读