Как передавать медиафайлы в Django + React

Я запутался в обслуживании медиа файлов на django и react. Вот мой код:

Вот мой settings.py :

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'build/static'),
]

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

MEDIA_URL = "/media/"

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api-user/', include('landingpage.urls')),
    path('', TemplateView.as_view(template_name='index.html'))
]

if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL,
                          document_root=settings.STATIC_ROOT)
    urlpatterns += static(settings.MEDIA_URL,
                          document_root=settings.MEDIA_ROOT)

Рендеринг на реакцию :

<img
  src="/img/logo.jpeg"  // is it true?
/>

Я поместил свое изображение в папку build/img. Когда я открываю с localhost 3000, оно отображается, но когда я открываю с localhost 8000, я получаю ошибку not found с этой ссылкой на изображение http://127.0.0.1:8000/img/logo.jpeg

Мой вопрос:

Где размещать изображения? Должен ли я создать папку media для хранения всех моих изображений или поместить их в папку build/image? Как указать ссылку src на изображение в react?

Спасибо.

В вашей оригинальной конфигурации Django ищет файлы в media dir, а не в build/img dir

Изменить настройки медиафайлов с

MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

To

Если вы храните изображения в папке build/img, как вы в комментариях, то MEDIA_URL & MEDIA_ROOT должен выглядеть так как

MEDIA_URL = "/img/" #edited
MEDIA_ROOT = os.path.join(BASE_DIR, 'build/img') #if the build dir is in root directory, if not then change it accordingly

Теперь вы можете использовать доступ к файлам изображений в этом шаблоне URL http://127.0.0.1:8000/img/logo.jpeg

Вернуться на верх