未在带有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

您需要添加要求：

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