Django 在模板中引用多个图像

Question

您好，我允许用户为每个项目上传多张图片，但到目前为止这些图片还没有显示。在 projects.html 中，应显示所有项目，并且标题和描述目前有效。但是 main-image 没有出现。在 single-project 中，应显示所有图像。我必须在 models.py 中更改什么？感谢转发

models.py

class Project(models.Model):
    title = models.CharField(max_length=200)
    describtion = models.TextField(null=True, blank=True)
    id = models.UUIDField(default=uuid.uuid4, unique=True, primary_key=True, editable=False)

class ProjectImage(models.Model):
    project = models.ForeignKey(Project, on_delete=models.CASCADE)
    featured_images = models.FileField()

forms.py

class ProjectForm(ModelForm):
    featured_images = forms.ImageField(widget=ClearableFileInput(attrs={'multiple':True}))
    class Meta:
        model = Project
        fields = ['title', 'describtion', 'featured_images']

views.py

def createProject(request):
    form = ProjectForm()

    if request.method == 'POST':
        form = ProjectForm(request.POST)
        images = request.FILES.getlist('image')
        if form.is_valid():
            project = form.save()
            for i in images:
                ProjectImage(project=project, image=i).save()

    context = {'form':form}
    return render(request, 'projects/project_form.html', context)

def projects(request):
    projects = Project.objects.all()
    context = {"projects":projects}
    return render(request, 'projects/projects.html', context)

def project(request, pk):
    projectObj = Project.objects.get(id=pk)
    return render(request, 'projects/single-project.html', {'project':projectObj})

projects.html

 {% for project in projects %}
          <div class="column">
            <div class="card project">
              <a href="{% url 'project' project.id %}" class="project">
                <img class="project__thumbnail" src="{{project.featured_images.url}}" alt="project thumbnail" />
                <div class="card__body">
                  <h3 class="project__title">{{project.title}}</h3>
                  <h3 class="project__title">{{project.price}} €</h3>
                </div>
              </a>
            </div>
          </div>
{% endfor %}

single-project.html

<h3 class="project__title">{{project.title}}</h3>
<h3 class="project__title">{{project.price}} €</h3>
<h3 class="singleProject__subtitle">Infos zum Produkt</h3>
{{project.describtion}}

project_form.html

            <form class="form" method="POST" enctype="multipart/form-data">
                {% csrf_token %}

                {% for field in form %}

                <div class="form__field">
                    <label for="formInput#text">{{field.label}}</label>
                    {{field}}
                </div>
                {% endfor %}

                <input class="btn btn--sub btn--lg  my-md" type="submit" value="Submit" />
            </form>

Answer 1

要访问项目的图像，您需要在模板中使用相关管理器：

projects.html

{% for project in projects %}
          <div class="column">
            <div class="card project">
              <a href="{% url 'project' project.id %}" class="project">
                <img class="project__thumbnail" src="{{project.projectimage_set.all.0.featured_images.url}}" alt="project thumbnail" />
                <div class="card__body">
                  <h3 class="project__title">{{project.title}}</h3>
                  <h3 class="project__title">{{project.price}} €</h3>
                </div>
              </a>
            </div>
          </div>
{% endfor %}

我假设“main-image”是指项目的第一张图片。

single-project.html

<h3 class="project__title">{{project.title}}</h3>
<h3 class="project__title">{{project.price}} €</h3>
<h3 class="singleProject__subtitle">Infos zum Produkt</h3>
{{project.describtion}}
{% for projectimage in project.projectimage_set.all %}
  <img src="{{projectimage.featured_images.url}}"/>
{% endfor %}

为避免N+1查询问题，您还可以在视图中更改查询：

views.py

def projects(request):
    projects = Project.objects.all().prefetch_related('projectimage_set')
    context = {"projects":projects}
    return render(request, 'projects/projects.html', context)

Django 在模板中引用多个图像

Django reference multiple image in template

django

django-templates

django-models

django-template-filters