Django多表多对一关联HTML渲染：如何获取Circuit模型图片？

1. 后端视图准备数据 #

在视图中筛选出即将到来的赛事（时间晚于当前时间），同时通过select_related关联查询关联的Circuit和Jeu模型，避免N+1查询问题，提升性能：

from django.utils import timezone
from .models import Course

def upcoming_courses_view(request):
    # 过滤即将到来的赛事，关联查询赛道和游戏
    upcoming_courses = Course.objects.filter(
        date__gte=timezone.now()
    ).select_related('circuit', 'jeu').order_by('date')
    
    return render(request, 'your_template.html', {'upcoming_courses': upcoming_courses})

2. 前端模板渲染赛事卡片 #

在HTML模板中循环遍历赛事数据，通过course.circuit.image.url直接获取关联赛道的图片地址，渲染卡片结构：

<div class="course-card-container">
  {% for course in upcoming_courses %}
    <div class="course-card">
      <!-- 卡片顶部：赛道图片 -->
      <img 
        src="{{ course.circuit.image.url }}" 
        alt="赛道：{{ course.circuit.name }}" 
        class="card-header-image"
      >
      <!-- 卡片内容区域 -->
      <div class="card-body">
        <h4>{{ course.title }}</h4>
        <p>所属游戏：{{ course.jeu.name }}</p>
        <p>赛事时间：{{ course.date|date:"Y年m月d日 H:i" }}</p>
        <p>赛道名称：{{ course.circuit.name }}</p>
      </div>
    </div>
  {% empty %}
    <p>目前没有即将到来的赛事</p>
  {% endfor %}
</div>

关键配置注意事项 #

• 确保图片字段定义正确：Circuit模型的image字段需为ImageField，并指定上传路径：

  from django.db import models
  
  class Circuit(models.Model):
      name = models.CharField(max_length=100)
      image = models.ImageField(upload_to='circuit_images/')  # 图片会上传到media/circuit_images/目录
      # 其他字段...
  

• 配置媒体文件路径：在settings.py中设置MEDIA相关参数：

  MEDIA_ROOT = BASE_DIR / 'media'
  MEDIA_URL = '/media/'
  

• 开发环境媒体路由：在项目根urls.py中添加媒体文件的访问路由（生产环境请用Nginx等服务器处理）：

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

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