使用JSX在React中显示来自JSON / API的图像 [英] Display image from JSON/API in React using JSX

问题描述

我是一个React noob，我正在发出一个API请求，要求从电影API中检索JSON，然后在我的组件中显示有关电影的信息，包括电影海报。我能够检索并显示文本，但是我无法使用JSX和数据库的URL显示图像。

I'm a React noob and I'm making an API request to retrieve JSON from a movie API and then displaying information about the movies, including the movie poster, in my component. I was able to retrieve and display text, but I am having trouble displaying images using JSX and the URL of the database.

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

I've assigned the images to post.poster_path and I'm attempting to concatenate the rest of the URL to the JSX.

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

这不起作用。

poster_path包含图像，我在React工具中对此进行了修改。如何将URL的其余部分正确连接到post.poster_path？

poster_path contains the image, I have verfied this in React tools. How do I properly concatenate the rest of the URL to post.poster_path?

推荐答案

如果

post.poster_path ='image.png'

post.poster_path = 'image.png'

并且整个网址是

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

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

for your image then the img tag will be as follows

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

在JSX中，如果你在变量中有一个值，需要用字符串连接，你可以使用勾选`

In JSX if you have a value in variable and need to concat with a string you use tick `

eg. {`string ${variableName}`}

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

and if post.poster_path has the whole path then:

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

这篇关于使用JSX在React中显示来自JSON / API的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！