未找到带有 webpack 的 React 组件中使用的动态图像 src

Question

我想在我的 React 组件中引用动态 img src。

<img src={`/assets/provider-logos/${provider.providerId.toLowerCase()}.png`} alt={`${provider.providerId.toLowerCase()}-logo`} />

我当前的 webpack-config 有一个 file-loader 规则，如下所示：

  {
    test: /\.(png|gif|jpg|svg|ico)$/,
    // include: imgPath,
    // csp policy complains about using inline images - using individual files instead
    use: "file-loader?name=assets/[name]-[hash].[ext]",
  },

如果 img 已使用哈希重命名，我如何动态引用它？

Answer 1

如果 provider.providerId.toLowerCase() 仅在运行时已知（例如从 API 接收），webpack 什么都不知道。

如果 provider.providerId.toLowerCase() 是一些常量变量，您可以添加 require:

<img src={require(`/assets/provider-logos/${provider.providerId.toLowerCase()}.png`)} alt={`${provider.providerId.toLowerCase()}-logo`} />

Answer 2

在这种情况下可以想到2个方案。

1 创建一个包含所有图像的 jsx 文件并将它们导出为模块。例如。 // 下面是一个文件 _images.jsx

import file1 from 'path';
import file2 from 'path';
import abc from 'src/assests/abc.png';

export { file1, file2, abc };

其中 file1 和 file2 是您希望提供商使用的图像名称。

2 确保您的构建在 dist 文件夹中输出图像，并且您已指定服务器上文件的路径。

<img src={SERVERPATH + `/assets/provider-logos/....

在这种情况下，您要指定文件的实际图像路径。

未找到带有 webpack 的 React 组件中使用的动态图像 src

Dynamic image src used in React component with webpack not found

reactjs

image

webpack

build

src