2017-12-09 47 views
0

저는 멍청한 놈입니다. 저는 영화 API에서 JSON을 검색하고 영화 포스터를 포함한 영화에 대한 정보를 내 구성 요소에 표시하는 API 요청을하고 있습니다. . 텍스트를 검색하고 표시 할 수 있었지만 JSX와 데이터베이스의 URL을 사용하여 이미지를 표시하는 데 문제가 있습니다.JSON을 사용하여 React에서 JSON/API의 이미지 표시

이미지를 post.poster_path에 할당했으며 나머지 URL을 JSX에 연결하려고합니다.

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

이것은 작동하지 않습니다.

poster_path에 이미지가 포함되어 있습니다. 저는 이것을 반작용 도구로 확인했습니다. 나머지 URL을 post.poster_path에 제대로 연결하려면 어떻게해야합니까?

+0

검사 할 때 src가 끝나는 것을 우리에게 말해 줄 수 있습니까? "이것은 작동하지 않습니다"정확히 무슨 일이 일어 났는지에 대한 자세한 설명이 있어야합니다. –

+0

연결이 잘못되었다고 가정하기 때문에 이미지가 전혀 표시되지 않습니다. alt 태그 "영화 포스터"가 표시됩니다. –

+0

예, 이미지가 표시되지 않지만 Chrome 웹 도구 (등)를 사용하여 요소를 검사하고 src가 끝나는 것을 알려줄 수 있습니까? 나는 몇 달 안에 반응을 사용하지 않았으므로 아무 것도 잘못 보일 수는 없지만 그것이 내가 시작하는 방법이다. –

답변

1

= 'image.png를'

post.poster_path 전체 URL이 다음

https://image.tmdb.org/t/p/w300/image.png "이미지에 대한

경우 img 태그는 다음과 같습니다.

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

당신이 변수에 값이 있고`틱을 사용하여 문자열로 CONCAT해야하는 경우

eg. {`string ${variableName}`} 

post.poster_path은 전체 경로가있는 경우 :

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