ReactJSフロントエンドからのDjango MEDIA_URLとMEDIA_ROOTの設定値へのアクセス

Question

私はDjango Webアプリケーションを持っており、フロントエンドにはReactJSを使用しています。私のアプリケーションは、私がローカルで開発しているとき（音楽ファイルを含むフォルダ）、そしてプロダクション（サーバ上のファイルシステム）でローカル音楽ファイルを取得したいと思っています。どちらも異なるパスを持つので、私はdevとprodの設定が異なります。

私は "音楽は" ファイルを含む私のフォルダです

MEDIA_ROOT = os.path.join(BASE_DIR, 'music') # on dev env 
MEDIA_URL = '/media/' 

を設定します。

私はurls.pyに

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

を追加しましたが、ReactJsはそれだけで文字列としてその変数を処理すると、私は

<audio src={"{{ MEDIA_ROOT }}" + props.audio}></audio>

を設定された値を取得していないコンポーネントをレンダリングしているとき

ここで、props.audioはファイルへのパスです。

「私はまた私のsettings.pyでテンプレートへ

django.core.context_processors.media 

を追加しましたが、私は、URLを入力するとき、それはまだ、しかし

動作しないのはlocalhost：8000 /メディア/パス/ to/music.wav '、私はファイルを見ることができます。

私のjavascriptからMEDIA_URLとMEDIA_ROOTの値を取得する方法に関するアイデアはありますか？またはコンポーネントをレンダリングするたびにそれらの値を取得するために私のDjangoバックエンドを呼び出す必要がありますか？

Answer 1

ファイルフィールドのurlプロパティを使用できます。 たとえばあなたがFileFieldに「オーディオ」モデル内を持っている場合は、ファイルのURLを取得するには、これを試すことができます。

{{ props.audio.url }} 

しかし、あなたがモデルを持っていけないし、あなたのビューでいくつかの変数がある場合、「ファイルのURLが含まれていますprops.audio 「あなたは、テンプレートにビューからそれを渡すことができます：

def my_view(request): 
    return render(request, 'template.html', {'props_url': props.audio}) 

を今すぐテンプレート内のURLシンプルを取得するには次のようにします。私も任意のモデルを使用していないよ

{{ props_url }}