JSONを使用してJSON/APIからの画像を表示する

私はリアクションのnoobです。ムービーAPIからJSONを取得してムービーに関する情報（ムービーポスターなど）を表示するAPIリクエストをコンポーネントに作成しています。テキストを取得して表示することができましたが、JSXとデータベースのURLを使用してイメージを表示するのに問題があります。JSONを使用して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に正しく連結するにはどうすればよいですか？

出典

2017-12-09 Nick Kinlen

あなたがそれを検査するときにどんなsrcが存在するか教えていただけますか？「これは機能しません」とは、正確に何が起こるのかをより詳細に記述することです。 –

連結が正しくないと仮定しているため、画像がまったく表示されません。 altタグ「映画ポスター」が表示されます。 –

はい、画像は表示されませんが、chrome Webツール（など）で要素を調べて、srcで終わるものを教えてください。私は数ヶ月のうちに反応を使用していないので、何も間違って見えるが、それは私がどのように始めるかだ。 –

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

を

出典

2017-12-09 07:07:11

JSONを使用してJSON/APIからの画像を表示する

答えて

関連する問題