如何让Django模型中的图片在HTML的card_img类容器中显示？

问题场景 #

要把Django Recipe模型中的图片显示在HTML的card__img容器里，浏览器开发者工具显示图片链接正确，但图片始终无法正常显示。原有设计是通过CSS设置card__img的背景图，现在改为直接用<img>标签调用模型中的图片资源。

解决步骤 #

1. 修正CSS样式冲突 #

原有CSS给card__img设置了固定背景图，且容器样式没有适配<img>标签，导致图片被遮挡或无法正确渲染。修改CSS如下：

/* 重置card__img的样式，移除原有背景图 */
.card--1 .card__img {
  position: relative;
  width: 100%;
  height: 200px; /* 保持原容器高度，可根据需求调整 */
  overflow: hidden;
}

/* 确保img标签填充容器且不变形 */
.card--1 .card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 保留hover遮罩效果，调整层级避免遮挡图片 */
.card--1 .card__img--hover {
  /* 如果需要hover背景图可保留，否则替换为纯色遮罩 */
  background-color: rgba(0,0,0,0.3);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card_link:hover .card__img--hover {
  opacity: 1;
}

2. 确认Django媒体文件配置完整性 #

即使链接显示正确，也要确保媒体文件的服务配置没问题：

• 在settings.py中确认媒体路径配置：

import os

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

• 在项目根目录的urls.py中添加媒体文件路由：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 你的其他路由配置
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

• 验证Recipe模型的image字段为ImageField，且上传的文件确实存在于MEDIA_ROOT对应的本地目录中。

3. 调整HTML结构层级（可选） #

确保<img>标签不会被其他元素遮挡，调整后的card__img相关结构如下：

<div class="card__img">
    <img src="{{ recipe.image.url }}" alt="{{ recipe.title }}">
</div>
<a href="{% url 'recipe_view' recipe.id %}" class="card_link">
    <div class="card__img--hover"></div>
</a>

核心原因 #

原有CSS的背景图设置与新增的<img>标签存在样式冲突，且容器未对<img>做适配，导致图片无法正常展示；同时需确保Django媒体文件的服务配置正确，保证图片资源能被正常访问。

内容的提问来源于stack exchange，提问作者Pat