如何从Django数据库中检索图片并在网站展示？

你的图片存储路径card/static/images可直接访问，但当前代码存在几个关键问题，以下是针对性修正方案：

1. 修正models.py的ImageField配置 #

ImageField需指定upload_to参数，确保文件存储路径与MEDIA配置匹配：

class Dish(models.Model):  # 类名首字母大写，符合PEP8编码规范
    dish_name = models.CharField(max_length=255)
    dish_size = models.CharField(max_length=7)
    dish_price = models.IntegerField()
    dish_description = models.CharField(max_length=255)
    # 设置upload_to为'.'，文件将直接存入MEDIA_ROOT目录
    dish_image = models.ImageField(upload_to='.')
    dish_date = models.DateField()

2. 修复views.py的上传逻辑与数据传递 #

• 文件上传不能用request.POST.get，必须通过request.FILES获取
• 需要将数据库中的菜品数据传递给模板，才能在前端展示

from django.shortcuts import render
from .models import Dish
from datetime import datetime

def index(request):
    # 从数据库查询所有菜品数据
    dishes = Dish.objects.all()
    if request.method == "POST":
        dish_name = request.POST.get('dish_name')
        dish_size = request.POST.get('dish_size')
        dish_price = request.POST.get('dish_price')
        dish_description = request.POST.get('dish_description')
        # 用request.FILES获取上传的图片文件
        dish_image = request.FILES.get('dish_image')
        if dish_image:  # 确保文件存在再创建对象
            item = Dish(
                dish_name=dish_name,
                dish_size=dish_size,
                dish_price=dish_price,
                dish_description=dish_description,
                dish_image=dish_image,
                dish_date=datetime.today()
            )
            item.save()
    # 将菜品数据作为上下文传给模板
    return render(request, "card/index.html", {'dishes': dishes})

3. 修正前端模板index.html的展示逻辑 #

模板无法从request.dish获取数据，需遍历view传递的dishes列表，逐个展示图片：

<!-- 上传表单必须添加enctype属性，否则文件无法正常提交 -->
<form method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <!-- 以下为示例表单字段，根据实际需求调整 -->
    <input type="text" name="dish_name" placeholder="菜品名称">
    <input type="text" name="dish_size" placeholder="规格">
    <input type="number" name="dish_price" placeholder="价格">
    <textarea name="dish_description" placeholder="描述"></textarea>
    <input type="file" name="dish_image">
    <button type="submit">添加菜品</button>
</form>

<!-- 展示所有菜品及图片 -->
<div class="dish-container">
    {% for dish in dishes %}
        <div class="dish-card">
            <img src="{{ dish.dish_image.url }}" height="100px" width="100px" alt="{{ dish.dish_name }}">
            <h3>{{ dish.dish_name }}</h3>
            <p>价格：{{ dish.dish_price }}元</p>
        </div>
    {% empty %}
        <p>暂无菜品数据</p>
    {% endfor %}
</div>

4. 确认urls.py与settings.py配置 #

当前配置基本可用，注意两点：

• 主urls.py中的static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)仅在开发环境生效，生产环境需通过服务器（如Nginx）配置静态文件服务
• 建议将MEDIA_ROOT从static目录分离（比如os.path.join(BASE_DIR, 'media')），避免静态文件收集时混淆，但当前配置不影响功能

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