使用 JSX 在 React 中显示来自 JSON/API 的图像答案

【问题标题】：Display image from JSON/API in React using JSX使用 JSX 在 React 中显示来自 JSON/API 的图像
【发布时间】：2018-05-23 08:23:30
【问题描述】：

我是 React 菜鸟，我正在发出 API 请求以从电影 API 中检索 JSON，然后在我的组件中显示有关电影的信息，包括电影海报。我能够检索和显示文本，但在使用 JSX 和数据库 URL 显示图像时遇到问题。

我已将图像分配给 post.poster_path，并尝试将 URL 的其余部分连接到 JSX。

<img src={"https://image.tmdb.org/t/p/w300/"+post.poster_path} alt="Movie Poster"/>

这不起作用。

poster_path 包含图像，我已经在 React 工具中验证了这一点。如何正确地将 URL 的其余部分连接到 post.poster_path？

【问题讨论】：

你能告诉我们当你检查它时 src 最终是什么吗？ “这不起作用”应该更详细地描述到底发生了什么。
图像根本不显示，因为我假设连接不正确。 alt标签“电影海报”显示。
是的，图像不显示，但你能用 chrome 网络工具（等）检查元素并告诉我们最终的 src 是什么吗？我已经有几个月没有使用 react 了，所以看起来没什么问题，但我就是这样开始的。
尝试使用require：<img src={require("image.jpg")} />

【解决方案1】：

如果

post.poster_path = 'image.png'

整个网址是

https://image.tmdb.org/t/p/w300/image.png"

对于您的图像，那么 img 标签将如下所示

<img src={`https://image.tmdb.org/t/p/w300/${post.poster_path}`} alt="Movie Poster"/>

在 JSX 中，如果你在变量中有一个值并且需要与一个字符串连接，你使用打勾`

eg. {`string ${variableName}`}

如果 post.poster_path 有完整的路径，那么：

<img src={post.poster_path} alt="Movie Poster"/>

【讨论】：