无法在后端 django 的反应中显示图像答案

【问题标题】：Can't display an image in react from backend django无法在后端 django 的反应中显示图像
【发布时间】：2021-07-12 11:28:16
【问题描述】：

我想显示一个图像，我从链接到本地主机 8000 上的 django 的数据库中获取 src，以响应（本地主机 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__'

我的网址：

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

它应该与图像对应的路径匹配，但它不会加载。我忘了操纵吗？还是参数错误？我只有图像有问题，其他都很好。

如果我在 localhost 8000 或 3000 上运行我的应用程序，我会得到相同的结果。

谢谢！

【问题讨论】：

如果我在导航器中尝试：http://127.0.0.1:8000/media/images/quiz/animal-2029280_1280.png，我什么也得不到。我的图像在我电脑上的这个路径中：C:\Users\nicou\Desktop\lpdm\backend\media\images\quiz\animal-2029280_1280.png
我的 get 状态为 200，但响应为空，无法加载。我确实添加了我的应用程序组件，也许我的反应路由器可能有问题？如果我尝试 url 中的路径，我只会看到我的布局。
也许正则表达式 r'^.*' 正在捕获所有请求，包括图像。您是否尝试从正则表达式中排除 media 网址？
你是对的！如果我删除此行，则图像 url 正在工作。非常感谢您的帮助，您拯救了我的一天 :) 我会尝试排除媒体，我真的不知道该怎么做...
我做了 re_path(r'^.*(?!(media))'，它似乎工作正常。再次感谢您！

标签： reactjs django django-rest-framework

【解决方案1】：

问题在于这两行代码：

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

第一个 url 路径正则表达式模式匹配所有 url。因此，第二个没有效果。

要解决它，只需更改这两行的顺序（或修改正则表达式以不匹配媒体网址）

【讨论】：