根据JSON文件加载图片会

Question

我有一个create react应用。我正在发出AJAX请求，并且收到了如下所示的JSON。

{id：“ b2”，标题：“黄氏世界”，剧集：12，product_image_url：“ / images / huangsworld.jpg”}

在我的create react应用中，我有一个包含所有对应图像的图像文件夹，我想基于product_url加载图像。

<img src={ product_image_url} <--- Doesn't work

有什么建议吗？

Answer 1

您需要将url设置为状态，因为当您从ajax请求获取json时，由于img只是一个html标签并且不会更新，因此您的组件将不会重新呈现，因此您需要通过设置url来确保重新呈现状态，因此当状态发生变化时，它将重新呈现。 你可以做这样的事情。 //成功处理ajax请求

this.setState({url: product_image_url})

然后在渲染中使用，像这样。

<img src={this.state.url}/>

Answer 2

尝试在JSON中将product_image_url更改为bg。

{id: "b2", title: "Huang's World", episodes: 12, bg: "/images/huangsworld.jpg"}