ローカルイメージが見つかりません

Question

私はReactとDjangoでプロジェクトを構築しています。また、Webpackを使用して変更をロードしています。私は、ローカルドライブから画像を表示したい。

myProject/brandplug/static/app/photoGrid/SampleDisplay.jsx 

写真は次の場所にあります：に

私は写真を表示したいからファイルがある

myProject/brandplug/static/app/index.jsx 

：

myProject/brandplug/static/location_photos/ 

index.jsxファイルでありますReactがレンダリングされるhtmlファイルは、

です。 SampleDisplay.jsxからそう

myProject/accounts/templates/index.html 

私はこのような画像をインポートしてみました：

const itemStyle = { 
    backgroundImage: `{require("../location_photos/" + ${photoName})}` 
}; 

そして：

<div style={itemStyle}> 
</div> 

代わりの"../location_photos/"私も"../../location_photos/"と"../../brandplug/static/location_photos/"を使用してみました。

ただし、画像はまだ読み込まれません。

どうすればロードできますか？

Answer 1

あなただけがを必要と同じsytaxであることを起こる文字列であるとbackgroundImageのを設定しています。

あなたは画像を必要とし、それを使用できます。

const itemStyle = { 
    backgroundImage: {require(`../location_photos/${photoName}`)} 
}; 

を私はこれを試したことがありません。 THISご質問が役に立ちます。

私はあなたがイメージをロードするためのWebPACKを使用しようとしていないことを示唆しているが、代わりにそれを提供するためにはDjangoを求めるだろう。

あなたが /静的/

はまた、あなたは少し誤使用してバッククォート文字列テンプレートだった、つまり、あなたがを必要としないでホストされるように、あなたの静的ファイルを設定されているものと想定

const itemStyle = { backgroundImage: `url("/static/location_photos/${photoName}")}` }; 

+：

`{require("../location_photos/${photoName}")}`