如何在Django模板中根据图片ID指定显示对应图片？

你的代码存在三个核心问题，导致图片无法正常显示：

1. 模板获取图片的语法错误 #

视图中传递的image是coreImage.objects.all()返回的QuerySet集合，并非单个模型实例，无法通过image.image(id=1)这种方式获取指定ID的图片。

修正方式： #

方法一（推荐，视图层处理逻辑）

修改视图代码，单独查询ID为1的图片并传入模板：

def core_view(request):
    context = {
        'all_images': coreImage.objects.all(),  # 保留全量图片集合（若需使用）
        'target_image': coreImage.objects.get(id=1),  # 单独获取ID=1的图片
        'drinks': DrinkRecipe.objects.all(),
        'ingredients': Ingredient.objects.all()
    }
    return render(request,'rhumSite/home.html',context=context)

模板中调用正确的变量获取图片URL：

<img class='page-img' src="{{ target_image.image.url }}">

方法二（模板内直接查询）

若需在模板中操作，可使用QuerySet的get方法（不推荐在模板中写入过多业务逻辑）：

<img class='page-img' src="{{ image.get(id=1).image.url }}">

2. 模型中imgLocation的定义错误 #

你将imgLocation定义为类属性，但上传处理器image_upload_handler中调用的是instance.imgLocation（实例属性）。类属性无法随实例更新，也不能通过数据库修改，不符合你"支持后续更新"的需求。

修正方式： #

将imgLocation改为数据库字段，支持后续通过后台或代码更新：

def image_upload_handler(instance, filename):
    fpath = pathlib.Path(filename)
    new_fname = str(uuid.uuid1())
    return f"{instance.imgLocation}/{new_fname}{fpath.suffix}"

class coreImage(models.Model):
    imageName = models.CharField(max_length=255, blank=False)
    image = models.ImageField(upload_to=image_upload_handler)
    imgLocation = models.CharField(max_length=255, default='headerImages')  # 改为CharField并设置默认值

    def __str__(self):
        return f"{self.imageName} in {self.imgLocation}"

修改后执行数据库迁移：

python manage.py makemigrations
python manage.py migrate

3. 缺少媒体文件的必要配置 #

Django默认不会自动托管用户上传的媒体文件，必须配置MEDIA_ROOT和MEDIA_URL，并设置对应的路由。

修正方式： #

1. 在项目settings.py中添加配置：

import os

# 媒体文件本地存储路径
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
# 媒体文件访问URL前缀
MEDIA_URL = '/media/'

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

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

urlpatterns = [
    # 你的其他路由配置，例如 path('', core_view, name='home'),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

3. 确保安装Pillow（Django ImageField的依赖库）：

pip install pillow

完成以上操作后重启项目，ID为1的图片即可正常显示。

内容的提问来源于stack exchange，提问作者Thomas Doll-Datema