React中如何通过props加载本地图片？答案

【问题标题】：How to load local images in React through props?React中如何通过props加载本地图片？
【发布时间】：2021-04-02 21:50:43
【问题描述】：

我已将下载的图像放在我的public 文件夹内的images 文件夹中。图片从 1 到 10 编号。

在我的App.js 文件中，我将每个图像的id 传递给Component.js。

return(
  <div>
    {info.map((users, i) => {
      return(
        <Component key={i} id={info[i].id} />
      )
    })}
  </div>
)

在Component.js 文件中，我正在渲染这样的图像：

<img alt='image' src='/images/{this.props.id}.jpg'/>

我的愿景是，我将通过来自App.js 的道具发送一个 id，并在Component.js 中使用该 id 为{this.props.id}.jpg 来显示该 id 的相应图像。页面正在加载，没有显示错误，但我看不到图像。然后我更改了图像文件夹的位置并尝试这样做：

<img alt='image' src={require(`D:/project-name/src/images/${this.props.id}.jpg`)}/>

但仍然面临同样的问题。请帮我解决这个问题。

【问题讨论】：

看起来在您的第二个代码块中，您没有使用模板字符串，这会导致所有图像具有相同的/images/{this.props.id}.jpg 网址。那可能是你的问题。
@MarkSkelton 我试过' src={ /images/{this.props.id}.jpg } '，但遇到了同样的问题。
非常接近，但您在{this.props 之前还缺少一个美元符号。尝试将其更改为${this.props
@MarkSkelton 谢谢你的评论！！图像现在可见。
太好了，我刚刚发布了这个答案，作为其他偶然发现这个问题的人的答案。

【解决方案1】：

问题在于您的图片标签。尝试将字符串设为模板字符串，不要忘记在 {this.props.id} 之前添加缺少的美元符号。

<img alt='image' src={`/images/${this.props.id}.jpg`} />

【讨论】：