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

Question

当模板在浏览器中呈现时，我上传的图像没有显示。 我已经像这样设置了我的媒体 url 模式：

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 模板的一部分，用于显示封面图片：

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

当我运行服务器时，页面显示正常，但封面图像没有出现。它只显示了这一点：

有趣的是，我的上传成功并出现在项目的 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. 清除浏览器缓存并重新加载页面（以防您看到之前的测试导致的边框效果）。

1234563状态码）。

2. 在浏览器中输入图片的网址，看看是否显示良好。如果是这样，则意味着您的 HTML/CSS 有问题（可能是因为“圆形 img-fluid”类）。

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

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