我的项目是基于多重图像。它不在前端显示图像

2024-05-16 22:58:32 发布

您现在位置：Python中文网/ 问答频道 /正文
1229 3

我的项目基本上是基于多图像有一个HTML文件的问题。在这个项目中，我可以一次上传多个图像，并一起查看它们。 我可以上传图片，但无法在前端显示。 帮我解决这个问题！！ 因此，我的html文件是： base.html

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous">
    <title>Multi Image Tutorial</title>
</head>
<body>
    <div class="container py-4">
        {% block content %}
        {% endblock %}
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

blog.html

{% extends 'base.html' %}
{% block content %}
<div class="row row-cols-1 row-cols-md-2">
    {% for post in posts %}
    <div class="col mb-4">
        <div class="card">
            <div class="view overlay">
                <img class="card-img-top" src="{{post.image.url}}"
                    alt="Card image cap" >
                <a href="#">
                <div class="mask rgba-white-slight"></div>
                </a>
            </div>
            <div class="card-body">
                <h4 class="card-title">{{post.title}}</h4>
                <p class="card-text">{{post.description}}</p>
                <a href="{% url 'detail' post.id %}" class="btn btn-primary btn-md">Read More</a>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}

detail.html

{% extends 'base.html' %}
{% block content %}
<div id="carouselExampleIndicators" class="carousel slide" data-mdb-ride="carousel">
  <ol class="carousel-indicators">
    {% for p in photos %}
    <li data-mdb-target="#carouselExampleIndicators" data-mdb-slide-to="{{forloop.counter0}}" class="{% if forloop.counter0 == 0 %} active {% endif %}"></li>
    {% endfor %}
</ol>
  <div class="carousel-inner" role="listbox">
    {% for p in photos %}
    <div class="carousel-item {% if forloop.counter0 == 0 %} active {% endif %}">
      <img
        src="{{post.image.url}}"
        class="d-block w-100"
        alt="First slide"/>
    </div>
    {% endfor %}
</div>
  <a
    class="carousel-control-prev"
    href="#carouselExampleIndicators"
    role="button"
    data-mdb-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </a>
  <a 
    class="carousel-control-next"
    href="#carouselExampleIndicators"
    role="button"
    data-mdb-slide="next" >
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </a>
</div>
{% endblock %}

models.py

from django.db import models

class Post(models.Model):
    title           = models.CharField(max_length=120)
    description     = models.TextField()
    image           = models.ImageField(upload_to='products/', null=True, blank=True)
    def __str__(self):
        return self.title
class PostImage(models.Model):
    post = models.ForeignKey(Post, default=None, on_delete=models.CASCADE)
    image = models.ImageField(upload_to='images/')
    def __str__(self):
        return self.post.title

views.py

from django.shortcuts import render, get_object_or_404
from .models import Post, PostImage

def blog_view(request):
    posts = Post.objects.all()
    return render(request, 'blog.html', {'posts':posts})
def detail_view(request, id):
    post = get_object_or_404(Post, id=id)
    photos = PostImage.objects.filter(post=post)
    return render(request, 'detail.html', {
        'post':post,
        'photos':photos,
    })

Tags： imagedivsrcidtitlemodelshtmljs
1条回答
网友
1楼 · 发布于 2024-05-16 22:58:32

这两个模型之间似乎有1:m关系，所以需要使用Prefetch

posts = Post.objects.all().prefetch_related(
        Prefetch(
            'postimage_set',
            PostImage.objects.filter(place='Main Product Image'),
            to_attr='pimages'
        ),
    )

在模板中

{% for post in posts %}
    ...
    <img src="{{ post.pimage.0.image.url }}">
{% endfor %}

models.py

class PostImage(models.Model):
    post = models.ForeignKey(Post, related_name='postimage_set', default=None, on_delete=models.CASCADE)
    image = models.ImageField(upload_to='images/')
    def __str__(self):
        return self.post.title

相关问题 更多 >

    编程相关推荐