Блог

Главная - Вопросы по программированию - Не удается отобразить изображение в react из серверной части django

Не удается отобразить изображение в react из серверной части django

#reactjs #django #django-rest-framework

Вопрос:

Я хочу отобразить изображение, из которого я получил src, в базе данных, связанной с django, на локальном хосте 8000, в react (локальный хост 3000).

вот мое мнение:

 class NextQuestion(APIView):    
    permission_classes = [IsAuthenticated]
    lookup_url_kwarg = 'old_questions'

    def post(self, request, format=None):
        old_questions = request.data.get(self.lookup_url_kwarg)

        if len(old_questions):
            old_questions_q = [Q(id=x) for x in old_questions]        
            questions_valides = Question.objects.exclude(reduce(operator.or_, old_questions_q))
            if len(questions_valides) == 0 :
                return Response("Il n'y a plus de questions disponibles!")
        else:
            questions_valides = Question.objects.all()
        
        index = randint(0, len(questions_valides) -1)
        new_question = QuestionSerializer(questions_valides[index]).data

        return Response(new_question)

Мой сериализатор:

 class QuestionSerializer(serializers.ModelSerializer):
    class Meta:
        model = Question
        fields = '__all__'

Мои URL-адреса:

 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('quiz/', include('quiz.urls')),
]

urlpatterns  = [re_path(r'^.*', TemplateView.as_view(template_name='index.html'))]
urlpatterns  = static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

И в моих настройках:

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

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

MEDIA_URL = '/media/'

В моем .js:

 <Fade in={!toggle} {...(!toggle ? { timeout: 2000 } : {})}>
    <Paper elevation={0} className={classes.paper}>
        <img className={classes.image} src={image} alt="La réponse." />
    </Paper>
</Fade >

Компонент моего приложения:

 const App = () => (
    <Provider store={store}>
        <SnackbarProvider maxSnack={5} >
            <Router>
                <Switch>                
                    <NavLayout>
                        <Route exact path='/' component={Home} />
                        <Route exact path='/login' component={Login} />
                        <Route exact path='/signup' component={Signup} />
                        <Route exact path='/reset-password' component={ResetPassword} />
                        <Route exact path='/password/reset/confirm/:uid/:token' component={ResetPasswordConfirm} />
                        <Route exact path='/activate/:uid/:token' component={Activate} />
                    </NavLayout>                
                </Switch> 
            </Router>
        </SnackbarProvider>        
    </Provider>    
);

export default App;

Запрос возвращает статус 200, но ответ пуст:

 GET
    
scheme
    http
host
    127.0.0.1:8000
filename
    /media/images/quiz/cochon.png
Adresse
    127.0.0.1:8000
État200
OK
VersionHTTP/1.1
Transfert2,42 Ko (taille 2,17 Ko)
Politique de référentsame-origin

    
Content-Length
    2227
Content-Type
    text/html; charset=utf-8
Date
    Sun, 18 Apr 2021 08:18:28 GMT
Referrer-Policy
    same-origin
Server
    WSGIServer/0.2 CPython/3.9.2
Vary
    Origin
X-Content-Type-Options
    nosniff
X-Frame-Options
    DENY
    
Accept
    image/webp,*/*
Accept-Encoding
    gzip, deflate
Accept-Language
    fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3
Cache-Control
    max-age=0
Connection
    keep-alive
Cookie
    csrftoken=8e5HTXPQRNuesBbAC389HePJYYebgcKNS7Km60kP6uqURbIpNyA3khuuJPQK4V7M; djdt=hide; sessionid=ffneb7uu8ia5ly8f7w45a2ynbemz6886; PGADMIN_INT_KEY=7bde6f56-0a71-41e0-9953-f719d7135568; PGADMIN_LANGUAGE=en; tabstyle=html-tab
Host
    127.0.0.1:8000
Referer
    http://127.0.0.1:8000/
User-Agent
    Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:87.0) Gecko/20100101 Firefox/87.0

Мое переменное изображение имеет это значение: /media/images/quiz/animal-2029280_1280.png

Он должен соответствовать пути, соответствующему изображению, но он не загружается. Неужели я забыл о манипуляции? Или ошибка в параметрах? У меня проблема только с изображением, остальное в порядке.

У меня тот же результат, если я запущу свое приложение на локальном хосте 8000 или 3000.

Тх!

Комментарии:

1. Если я попробую в своем навигаторе: http://127.0.0.1:8000/media/images/quiz/animal-2029280_1280.png , я ничего не получу. мое изображение находится по этому пути на моем компьютере: C:UsersnicouDesktoplpdmbackendmediaimagesquizanimal-2029280_1280.png

2. У моего get статус 200, но ответ пустой, он не загружается. Я добавил свой компонент приложения, возможно, проблема может возникнуть с моим маршрутизатором react? Если я попробую указать путь в URL-адресе, я увижу только свой макет.

3. Возможно, регулярное r'^.*' выражение улавливает все запросы, а также изображения. Вы пытались исключить media URL-адреса из регулярных выражений?

4. Вы правы! если я удалю эту строку, URL-адрес изображения будет работать. Спасибо вам за помощь, вы спасли мне день 🙂 Я постараюсь исключить медиа, я действительно не знаю, как это сделать…

5. Я сделал re_path(r’^.*(?!(медиа))’, похоже, он работает правильно. Еще раз спасибо вам!

Ответ №1:

Проблема заключается в этих двух строках кода:

 urlpatterns  = [re_path(r'^.*', TemplateView.as_view(template_name='index.html'))]
urlpatterns  = static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Первый шаблон регулярного выражения URL-пути соответствует всем URL-адресам. Из-за этого второй не имеет никакого эффекта.

Чтобы решить эту проблему, просто измените порядок этих двух строк (или измените регулярное выражение, чтобы оно не соответствовало URL-адресам МУЛЬТИМЕДИА).

Метки: