IT技术 - 使用 JSX 在 React 中显示来自 JSON/API 的图像 - 吾爱随笔录

IT技术 json image reactjs concatenation jsx

2022-07-12 01:39:56

我是 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？

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 中，如果变量中有值并且需要与字符串连接，则使用 tick `

eg. {`string ${variableName}`}

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

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

其它你可能感兴趣的问题