Getting the picture from my api to load reactjs - reactjs

Question

I have this as my render function and I'm trying to pass the "{this.state.poster}" through it so it will load what ever random film poster it has received from the api. the console.log will show as /q2Y2EuDSaNCH88ETlyiu8bZc5TT.jpg for example but when I try to add that to the image with {this.state.poster} it doesn't work and im not sure why.
render() {
console.log(this.state.poster);
return (
<div className="main">
<h1> Lets see what you got</h1>
<div name="title">
{this.state.title}
</div>
<div name="overview">
{this.state.overview}
</div>
<div name="poster_path">
<img src="https://image.tmdb.org/t/p/original/${this.state.poster}" alt="picture" />
</div>
<div name="vote_average">
Vote:{this.state.vote}
</div>
<button onClick={this.getFilm}>Get Random Movie</button>
</div>
);
}
}
export default App;

Answer 1

first the curly brace specifying a js expression then string interpolation :)
<img src={`https://image.tmdb.org/t/p/original/${this.state.poster}`} alt="picture" />
string interpolation only works inside js expressions ;).

Answer 2

The ${expression} syntax is meant to be used in template literals
What you want here is to concatenate the state with the beginning of the image url like this :
<img
src={'https://image.tmdb.org/t/p/original/' + this.state.poster}
alt="picture"
/>
or by using a method like
getImgUrl (image) {
return 'https://image.tmdb.org/t/p/original/' + image;
}
and using it with
<img
src={this.getImgUrl(this.state.poster)}
alt="picture"
/>

Answer 3

You say that console.log prints out /q2Y2EuDSaNCH88ETlyiu8bZc5TT.jpg.
There is a backslash as the first character.
That tells me that the src attribute's value will be https://image.tmdb.org/t/p/original//q2Y2EuDSaNCH88ETlyiu8bZc5TT.jpg.
Note, the // to the right of original.
Try removing the extra backslash like following:
https://image.tmdb.org/t/p/original${this.state.poster}