动态图像src在webpack反应元件中的应用

Question

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

<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

在这个场景中可以想到两个选项。

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/....

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

Answer 2

如果provider.providerId.toLowerCase()只知道运行时(例如从API接收到)，webpack什么都不知道。

如果是provider.providerId.toLowerCase()，则可以添加require：

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