从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/'

其中＆＃34;音乐＆＃34;是我的文件夹，包含文件。

我添加了

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中的TEMPLATES但它仍然无法正常工作

但是，当我输入网址＆＃39; localhost：8000 / media / path / to / music.wav＆＃39;时，我可以看到该文件。

有关如何从我的javascript获取MEDIA_URL和MEDIA_ROOT值的任何想法？或者我每次渲染组件时都必须调用我的Django后端来检索这些值？

Answer 1

您可以使用文件字段的url属性。 例如，如果你有FileField＆＃39; audio＆＃39;在你的模型中，你可以尝试这个来获取文件的网址：

{{ props.audio.url }}

但是如果你没有模特，在你看来有一些变量包含文件＆＃39; props.audio＆＃39;你可以将它从视图传递到模板：

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

现在在模板中获取简单的url，请执行以下操作：

{{ props_url }}