基于JSON文件加载图像起反应

Question

我有一个创建反应应用程序。我正在制作一个AJAX请求，我收到的JSON看起来像这样。

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

在我的创建反应应用程序中，我有一个包含所有相应图像的图像文件夹，我想基于product_url加载图像。

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

有什么建议？

Answer 1

你需要设置url in state，因为当你从你的ajax请求中获取json时你的组件将不会重新渲染，因为img只是一个html标记并且不会更新所以你需要通过设置url in state来确保它重新渲染，因此当状态发生变化时，它将重新渲染。你可以做这样的事情。 // 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"}