Как вывести изображение в нужную категорию товара? (если есть две отдельные модели (продукт и изображение))

Не могу понять, как соединить две модели (товар и изображения) в представлениях и вывести изображения в html.

На данный момент для конкретного проекта загружается несколько изображений (например, фотографии 3D модели) все это через админ панель. Есть несколько проектов, то есть 3D модели, проектирование и так далее. И теперь я не могу отобразить на сайте 1 из этих загруженных изображений для каждого продукта (проекта). То есть либо отображаются все изображения, которые были загружены (и 3д модели и книги и инженерия).

Или если вы используете model.objects.first () отображает самое первое загруженное изображение (то есть одинаковое для всех проектов).

Мои модели:

 class Portfolio (models.Model):
        modeling='Modeling'
        books ='Books'
        engineering='Engineering'
        category_ch = [
            (modeling, 'Modeling'),
            (books, 'Books'),
            (engineering, 'Engineering'),
        ]
        category = models.CharField('Category',max_length=100,choices=category_ch, default=modeling)
        name = models.ForeignKey (Teams, related_name='maked', on_delete=models.PROTECT,blank=True)
        short_discription = models.CharField("Name of the work", max_length=200, blank=True)
        discription = models.TextField('Discription', blank=True)
        сustomer = models.CharField('Customer', max_length=100, default='Заказчик')
        created = models.DateTimeField('Date',auto_now_add=True)
        class Meta:
            verbose_name= 'Portfolio'
            verbose_name_plural = 'Portfolios'
        def __str__(self):
            return self.short_discription
        #def get_absolute_url(self):
            #return reversed ('shop:product_detail', args=[self.category.slug, self.slug]')
    
    class Image(models.Model):
        image = models.ImageField('Picture of work', upload_to='products/%Y/%m/%d', blank=True)
        product = models.ForeignKey(Portfolio, default=None, related_name='image', on_delete=models.PROTECT)

Views:

def portfolio_page(request):
    portfolio = Portfolio.objects.all()
    image_work= Image.objects.all()
    ctx = {
        'portfolio': portfolio,
        'image':image_work,
    }
    return render(request, 'mainApp/portfolio_page.html',ctx)

HTML:

{% for el in portfolio %}
                    <div class="portfolio_db">
                        <h3> {{ el.short_discription }} </h3>
                        {% for i in image %}
                            <img class="photo_work" src="{{ i.image_work }}" alt="Oh, there is something wrong here" width="155px" height="215px"></img>
                        {% endfor %}
                        <h4> Maked by {{ el.name }} </h4>
                        <h4> Ordered by {{ el.сustomer }} </h4>
                    </div>
                {% endfor %}

Вы можете перечислить все el.image_set.all в шаблоне, так:

{% for el in portfolio %}
    <!-- … -->
    {% for i in el.image_set.all %}
        <img class="photo_work" src="{{ i.image.url }}" alt="Oh, there is something wrong here" width="155px" height="215px"></img>
    {% endfor %}
    <!-- … -->
{% endfor %}

в представлении мы можем увеличить производительность, извлекая все связанные Image и выполняя объединение на уровне Django/Python:

def portfolio_page(request):
    portfolio = Portfolio.objects.prefetch_related('image_set')
    ctx = {
        'portfolio': portfolio
    }
    return render(request, 'mainApp/portfolio_page.html',ctx)
Вернуться на верх