动态图像未在 nelify React js 中加载

Question

我已经在 Neltlify 上部署了我的 React js 应用程序。本地应用程序动态获取图像。但在生产环境中却不能。如何解决这个问题？

const Tags = this.props.tags.map(tagEl => (
      <Chip
        key={tagEl.tag_id}
        close={false}
        className="chip-user-profile"
      **>
        {<img src={require(`../../assets/${tagEl.value}.png`)} alt="tag" style={{ width: "3rem" }} className="suggestion-img
      -img" />}**
        {tagEl.value}
      </Chip>
    ));

错误：

main.97a56952.js:2 Error: Cannot find module './technology.png'

Answer 1

在

assets

文件夹内创建一个

public

文件夹，将所有图像移入其中。然后，您可以直接访问图像，而无需使用

require()

，如下所示：

<img
  src={`/assets/${tagEl.value}.png`}
  alt="tag"
  style={{ width: "3rem" }}
  className="suggestion-img-img"
/>