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

Question

我是一个React noob，我正在发出一个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？

Answer 1

如果

  

post.poster_path =＆＃39; image.png＆＃39;

并且整个网址都是

  

https://image.tmdb.org/t/p/w300/image.png＆＃34;

对于你的图像，那么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"/>