從ReactJS前端訪問Django MEDIA_URL和MEDIA_ROOT setting.py值

Question

我有一個Django Web應用程序，並且正在使用ReactJS作為前端。 我的應用程序要在本地開發（包含音樂文件的文件夾）以及在生產環境（服務器上的文件系統）時檢索本地音樂文件。 兩者都有不同的路徑，所以我對dev和prod的設置不同。

我設置

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

其中“音樂”是我包含文件的文件夾。

我加了

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

到我的urls.py，但是當ReactJs渲染組件時，它將那個變量當作一個字符串對待，而沒有得到我設置的值

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

其中props.audio是文件的路徑。

我還加了

django.core.context_processors.media 

到我的settings.py中的模板，但仍然無法正常工作

但是，當我輸入url'localhost：8000 / media / path / to / music.wav'時，我可以看到該文件。

關於如何從我的JavaScript中獲取MEDIA_URL和MEDIA_ROOT的值的任何想法？ 還是我每次渲染組件時都要對Django后端進行get調用以檢索這些值？

Answer 1

您可以使用文件字段的url屬性。 例如，如果您的模型中有FileField'audio'，則可以嘗試以下操作來獲取文件的url：

{{ props.audio.url }}

但是，如果您沒有模型，並且在視圖中有一些包含文件url'props.audio'的變量，則可以將其從視圖傳遞到模板：

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

現在在模板中獲取url簡單，請執行以下操作：

{{ props_url }}