如何使用reactjs在django url中的url中获取媒体图像

Question

static and media configuration in settings.py

STATIC_URL = '/static/'

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

MEDIA_URL='/media/'

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

urls.py

from django.contrib import admin
from django.urls import path, include, re_path
from django.views.generic import TemplateView
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    re_path('', TemplateView.as_view(template_name='index.html')),
] + static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

Here i am using django with reactjs.

i have given the path of build folder in react app like this.

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'frontend','build')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

When i am going to http://127.0.0.1:8000/media/images_OkG6q2k.jpeg path to get images in side media folder which are uploaded by users i am getting the react route page. I am not getting the image from media folder.

How i can see the media photos through url.

Project structure

react home is coming instead media image like this when i amgoing url

Answer 1

I think I just overcame this problem with one of my projects with Django backend + React frontend. It is in your url patterns.

As I understand it, this catch-all pattern:

re_path('', TemplateView.as_view(template_name='index.html'))

essentially overrides the media url pattern you wrote (and any others below it), which prevents the Django backend from allowing you to access the media files. To fix this, simply make sure the catch-all route is the last one on your patterns. After you are done with the rest of the patterns, on a new line do this:

urlpatterns += [re_path('', TemplateView.as_view(template_name='index.html'))]

This way, you add it to your paths after all the rest and it doesn't "block" any of the others. hopefully this fixes it!