无法使用DRF在Django模板中显示图像

Question

在浏览器中渲染模板时，我的上传图像未显示。 我已经设置了我的媒体网址格式：

urlpatterns = [
  # App routes
  ....
]

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

在项目设置中，我具有如下媒体配置：

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

这是index.html模板的一部分，用于显示cover_image：

<div class="col-md-5" >
    <img src="{{ post.cover_image.url }}" class="rounded img-fluid"/>
</div>

当我运行服务器时，页面可以正确显示，但是cover_image没有出现。它仅显示以下内容：

有趣的是，我的上传成功，并显示在项目的media / images目录中，并且终端日志显示200 http响应，但不确定为什么它不显示在浏览器中。我正在使用Django Rest Framework，并且具有用于各个应用程序的模板。

这是项目设置上下文处理器：

'context_processors': [
            'django.template.context_processors.debug',
            'django.template.context_processors.request',
            'django.contrib.auth.context_processors.auth',
            'django.template.context_processors.media',
            'django.template.context_processors.static',
            'django.contrib.messages.context_processors.messages',
        ],

我想念什么吗？

Answer 1

这里没有足够的信息来确定问题的原因。您可以按照以下步骤进行调查：

1. 清除浏览器的缓存并重新加载页面（以防万一，由于之前的测试您看到边框效果）。

2. 检查从服务器接收到的源HTML，尤其是如果{{ post.cover_image.url }}替换为期望的内容（应该可以，因为您的日志显示请求图像的URL并返回一个200 OK状态代码）。

3. 在浏览器中键入图像的URL，然后查看其显示是否良好。如果是这样，则意味着您的HTML / CSS出了点问题（可能是由于“圆形的img-fluid”类所致）。

4. 如果2.失败，则您下载的映像可能已损坏。您需要确定它在上载或下载期间是否损坏。首先，检查上传的图像在服务器上是否正常，例如，通过下载然后不使用Django（SFTP ...）。

5. 如果服务器上的映像正常，请检查下载的映像。保存并尝试使用图像软件打开它。还要检查响应图像请求的标题（错误的Content-Type？）和数据大小（使用浏览器的Web开发工具）。