CODEWITHSUNDEEP
jsonimagereactjsconcatenationjsx
Nick Kinlen
Nick Kinlen

Reputation: 1406

Display image from JSON/API in React using JSX

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.

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"/>

This doesn't work.

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?

Upvotes: 1

Views: 4997

Answers (1)

Kai
Kai

Reputation: 351

If

post.poster_path = 'image.png'

and the whole url is

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

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"/>

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

eg. {`string ${variableName}`}

and if post.poster_path has the whole path then:

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

Upvotes: 2

Related Questions