在 Django 中显示与产品相关的图像？

Question

您好，我正在尝试在弹出窗口中显示与特定产品相关的所有图像 我的问题是当我为其中一个对象上传照片时，它显示在两个对象上我如何过滤它们以显示在相关对象上？ 所有这些对象都在同一页面上

Photo 1

Popup

Admin Panel

我的模型.py

class Portfolio_Detail(models.Model):
title = models.CharField(max_length=50)
image = models.ImageField(upload_to='Portfolio/')

def __str__(self):
    return self.title

class Portfolio_Image(models.Model):
portfolio = models.ForeignKey(Portfolio_Detail,on_delete=models.CASCADE,related_name="portfolio")
image = models.ImageField(upload_to='Portfolio_Image/')

我的意见.py

def home(request):
portfolios = Portfolio_Detail.objects.all()
portfolio_images = Portfolio_Image.objects.filter()

context = {
    'portfolios' : portfolios,
    'portfolio_images' : portfolio_images,
}

return render(request, "index.html", context)

我的模板

       <!-- Portfolio Section Start  -->
<section class="portfolio-section sec-padding" id="portfolio">
  <div class="container">
    <div class="row">
      <div class="section-title">
        <h2>Recent Works</h2>
      </div>
    </div>
    <div class="row">
      <!-- Portfolio Item1 Start -->
      {% for item in portfolios %}
      <div class="portfolio-item">
        <div class="portfolio-item-thumbnail">
          <img src="{{item.image.url}}" alt="portfolio item Thumb">
        </div>
        <h3 class="portfolio-item-title">{{item.title}}</h3>
        <button type="button" class="btn view-project-btn">View Project</button>
        <div class="portfolio-item-details">
          <div class="description">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
          </div>
          <div class="general-info">
            <ul>
              <li>Created : <span>4 dec 2020</span></li>
              <li>Technology : <span>Html</span></li>
              <li>Role : <span>Frontend</span></li>
              <li>View Online : <span><a href="#" target="_blank">www.domain.com</a></span></li>
            </ul>
          </div>
        </div>
      </div>
      <!-- Portfolio Item1 End -->
      {% endfor %}
    </div>
  </div>
</section>

   <div class="portfolio-popup">
<div class="pp-inner">
  <div class="pp-content">
    <div class="pp-header">
      <button type="button" class="btn pp-close"><i class="fas fa-times"></i></button>
      <div class="pp-thumbnail">
      {% for item in portfolio_images %}
        <img src="{{item.image.url}}" alt="">
      {% endfor %}
      </div>
      <h3></h3>
    </div>
    <div class="pp-body">
    </div>
  </div>
</div>

我的模板代码

<body>

  <!-- Main Start  -->
  <div class="main hidden">

    <!-- Portfolio Section Start  -->
    <section class="portfolio-section sec-padding" id="portfolio">
      <div class="container">
        <div class="row">
          <div class="section-title">
            <h2>Recent Works</h2>
          </div>
        </div>
        <div class="row">
          <!-- Portfolio Item1 Start -->
          <div class="portfolio-item">
            <div class="portfolio-item-thumbnail">
              <img src="img/portfolio/1.jpg" alt="portfolio item Thumb">
            </div>
            <h3 class="portfolio-item-title">App Landing Page</h3>
            <button type="button" class="btn view-project-btn">View Project</button>
            <div class="portfolio-item-details">
              <div class="description">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui natus numquam praesentium quidem dolorum explicabo molestiae reiciendis, iure suscipit placeat recusandae non nesciunt similique? Reprehenderit quia numquam eos quasi repudiandae.</p>
              </div>
              <div class="general-info">
                <ul>
                  <li>Created : <span>4 dec 2020</span></li>
                  <li>Technology : <span>Html</span></li>
                  <li>Role : <span>Frontend</span></li>
                  <li>View Online : <span><a href="#" target="_blank">www.domain.com</a></span></li>
                </ul>
              </div>
            </div>
          </div>
          <!-- Portfolio Item1 End -->            
        </div>
      </div>
    </section>

  </div>
  <!-- Main End  -->
  <!-- Portfolio Item Detail Start -->
  <div class="portfolio-popup">
    <div class="pp-inner">
      <div class="pp-content">
        <div class="pp-header">
          <button type="button" class="btn pp-close"><i class="fas fa-times"></i></button>
          <div class="pp-thumbnail">
            <img src="" alt="">
          </div>
          <h3></h3>
        </div>
        <div class="pp-body">
        </div>
      </div>
    </div>
  </div>
  <!-- Portfolio Item Detail End -->
  <script src="js/script.js"></script>
</body>
</html>

Answer 1

你可以像下面这样改变你的models.py：

   class PortfolioImage(models.Model):
        image = models.ImageField(upload_to='portfolio_image/')
    
    
    class PortfolioDetail(models.Model):
        title = models.CharField(max_length=50)
        images = models.ManyToManyField(PortfolioImage)
    
        def __str__(self):
            return self.title

然后在你的 HTML 中：

<!-- Portfolio Section Start  -->
<section class="portfolio-section sec-padding" id="portfolio">
    <div class="container">
        <div class="row">
            <div class="section-title">
                <h2>Recent Works</h2>
            </div>
        </div>
        <div class="row">
            <!-- Portfolio Item1 Start -->
            {% for item in portfolios %}
                <div class="portfolio-item">
                    <div class="portfolio-item-thumbnail">
                        <img src="{{ item.image.url }}" alt="portfolio item Thumb">
                    </div>
                    <h3 class="portfolio-item-title">{{ item.title }}</h3>
                    <button type="button" class="btn view-project-btn">View Project</button>
                    <div class="portfolio-item-details">
                        <div class="description">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                        </div>
                        <div class="general-info">
                            <ul>
                                <li>Created : <span>4 dec 2020</span></li>
                                <li>Technology : <span>Html</span></li>
                                <li>Role : <span>Frontend</span></li>
                                <li>View Online : <span><a href="#" target="_blank">www.domain.com</a></span></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- Portfolio Item1 End -->
                {% for portfolio_image in  item.images.all %}
                    <div class="portfolio-popup">
                        <div class="pp-inner">
                            <div class="pp-content">
                                <div class="pp-header">
                                    <button type="button" class="btn pp-close"><i class="fas fa-times"></i></button>
                                    <div class="pp-thumbnail">
                                        {% for item in portfolio_images %}
                                            <img src="{{ item.image.url }}" alt="">
                                        {% endfor %}
                                    </div>
                                    <h3></h3>
                                </div>
                                <div class="pp-body">
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            {% endfor %}
        </div>
    </div>
</section>