Django博客详情页图片幻灯片模板调用失败问题求助

1. 修正模板中的图片字段调用 #

你的Images模型中存储图片的字段是images，但模板里错误使用了{{ img.url }}，正确的调用方式是访问模型字段的url属性：

{% load static %}
{% for img in images %}
    <div class="swiper-slide">
    <img src="{{ img.images.url }}" alt="{{ post.title }}">
    </div>
{% endfor %}

2. 配置Django媒体文件服务 #

Django默认不会处理用户上传的媒体文件，需添加以下配置：

步骤1：修改settings.py #

添加媒体文件的存储路径和访问URL：

# settings.py
import os

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

步骤2：修改项目根目录的urls.py #

添加媒体文件的路由，让Django能正确返回上传的图片：

# urls.py
from django.conf import settings
from django.conf.urls.static import static
from django.contrib import admin
from django.urls import path

urlpatterns = [
    path('admin/', admin.site.urls),
    # 其他项目路由...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

3. 修复视图中的潜在错误 #

当pid参数不存在时，post和images变量会未定义导致报错，优化视图逻辑：

# views.py
from django.shortcuts import render, get_object_or_404
from blog.models import Post, Images

def blog_single(request, **kwargs):
    post = None
    images = []
    if pid := kwargs.get('pid'):
        # 若文章不存在直接返回404页面
        post = get_object_or_404(Post, id=pid, status=1)
        images = Images.objects.filter(post=post)
    context = {'post': post, 'images': images}
    return render(request, 'blog/blog-single.html', context)

4. 修正模型中的缩进错误 #

Post模型里的status字段缩进不正确，需和其他字段保持同级：

# models.py
from django.db import models
from django.contrib.auth.models import User

class Post(models.Model):
    author = models.ForeignKey(User, on_delete=models.DO_NOTHING, null=True)
    image = models.ImageField(upload_to='blog_images/', default='blog_images/default.jpg')
    title = models.CharField(max_length=255)
    content = models.TextField()
    status = models.BooleanField(default=False)  # 修正此处缩进

    def __str__(self) -> str:
        return self.title

class Images(models.Model):
    post = models.ForeignKey(Post, default=None, on_delete=models.CASCADE)
    images = models.ImageField(upload_to='blog_images/', default='blog_images/default.jpg')

5. 验证媒体文件存储路径 #

确保项目根目录下存在media/blog_images文件夹并具备读写权限，若没有则手动创建：

mkdir -p media/blog_images
chmod 755 media/blog_images

完成以上步骤后，重启Django服务器，重新上传图片测试即可正常显示图片幻灯片。

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