Trying to display multiple image for my product

Question

I'm trying to display multiple images for one product but the images won't display and i don't know why can anyone help.

My Models. I have to image field one is used to display and product and if the user wants more detail the other is used to show more images of the product.

class Product(models.Model):
    name = models.TextField()
    slug = models.SlugField(null=True, unique=True)
    description = models.TextField()
    stock = models.SmallIntegerField()
    price = models.DecimalField(max_digits=10, decimal_places=2)


    def __str__(self):
        return self.name

    def get_absolute_url(self):
        return reverse('single',args=[self.id,self.slug])

class ProductImage(models.Model):
    product = models.ForeignKey('Product', on_delete=models.CASCADE)
    image = models.ImageField(upload_to='images/', blank=True)
    featured = models.BooleanField(default=False)
    thumbnail = models.BooleanField(default=False)
    updated = models.DateTimeField(auto_now_add=False, auto_now=True)
    active = models.BooleanField(default=True)

    def __unicode__(self):
        return self.product.image

Views

def single(request, id, slug):
    try:
        # products = Product.objects.get(slug=slug)
        product = get_object_or_404(Product,
                                id=id,
                                slug=slug)
        images = ProductImage.objects.filter(product=product)

        return render(request, "single.html",
                        {'product': product},
                        {'images':images})
    except:
        raise Http404

How I tried to display the images on the Html page.

{% for img in images %}
    {% if item.featured %}
      <img class="img-responsive"src="{{ MEDIA_URL }}{{ img.image.url }}" height="px" width="px" class="pr-5 mr-5">
      {% endif %}
      {% if not item.featured %}
      <img class="img-responsive"src="{{ MEDIA_URL }}{{ img.image.url }}" height="px" width="px" class="pr-5 mr-5">
      {% endif %} 
  {% endfor %}

Settings

STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'assets'),
)

CRISPY_TEMPLATE_PACK = 'bootstrap3'
CRISPY_TEMPLATE_PACK = 'bootstrap4'

LOGIN_REDIRECT_URL = '/'

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

LOGIN_URL = '/account/login/'

Try removing MEDIA_URL, src="{{ img.image.url }}" Do you get any errors in browser console? — danish_wani, Mar 29 '20 at 16:23
@danish_wani the link isn't appearing all is see is ::before — Eman5648, Mar 29 '20 at 19:52

score 0 · Answer 1 · answered Mar 29 '20 at 16:27

0

Remove {{MEDIA_URL}} from src.

src="{{ img.image.url }}"

answered Mar 29 '20 at 16:27

Gourav Saini

632
6
11

Oghomwen Oguns · Accepted Answer · 2020-03-29T22:04:32.190

0

{% for img in images %}
{% if img.image %}
  <img class="img-responsive"src="{{ img.image.url }}" height="px" width="px" class="pr-5 mr-5">
{% endif %}
{% endfor %}

edited Mar 29 '20 at 22:04

answered Mar 29 '20 at 16:27

Oghomwen Oguns

161
1
7

still doesn't display – Eman5648 Mar 29 '20 at 19:07
@Eman... Are you sure you have static url in settings.py and in url? – Oghomwen Oguns Mar 29 '20 at 20:04
@Eman.. Alright, do you have the image saved in database? Because if it's not saved it won't display. – Oghomwen Oguns Mar 29 '20 at 20:39
@Eman...this should work, I can see you are filtering the ID of Product. Why don't you just move the image to Product model, so it can be easy to call in views, instead of creating a separate Model for that. – Oghomwen Oguns Mar 29 '20 at 21:03
i'm trying to display multiple image for one product – Eman5648 Mar 29 '20 at 21:11
@Eman.. Add this at the bottom of your urls.py: if settings.DEBUG: urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) – Oghomwen Oguns Mar 29 '20 at 21:12
@Eman... I don't understand what you mean, no image display on browser at all? It will be much easier to call the image if you add it up to Product model. So it will be like; images=Product.object.all()... Then use my code for the template, you will get your display image. – Oghomwen Oguns Mar 29 '20 at 21:17
@Eman... Maybe this could help... https://stackoverflow.com/questions/44075143/multiple-images-in-django-form-with-multiupload – Oghomwen Oguns Mar 29 '20 at 22:05

Trying to display multiple image for my product

2 Answers2