CODEWITHSUNDEEP
django
Samyak Jain
Samyak Jain

Reputation: 367

Images not being displayed in django

I have this product model:

class Product(models.Model):
    category = models.ForeignKey(Category,
                                 related_name='products',
                                 on_delete=models.CASCADE)
    name = models.CharField(max_length=200, db_index=True)
    slug = models.SlugField(max_length=200, db_index=True)
    image = models.ImageField(upload_to='products/%Y/%m/%d',
                              blank=True)
    description = models.TextField(blank=True)
    price = models.DecimalField(max_digits=10, decimal_places=2)
    available = models.BooleanField(default=True)
    created = models.DateTimeField(auto_now_add=True)
    updated = models.DateTimeField(auto_now=True)

    class Meta:
        ordering = ('name',)
        index_together = (('id', 'slug'),)

    def __str__(self):
        return self.name

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

And this product_list view, where all the products should be displayed:

def product_list(request, category_slug=None):
    category = None
    categories = Category.objects.all()
    products = Product.objects.filter(available=True)
    if category_slug:
        category = get_object_or_404(Category, slug=category_slug)
        products = products.filter(category=category)
    return render(request, 'shop/product/list.html',{
        'category':category,
        'categories':categories,
        'products':products
    })

And this is the list.html template:

{% extends "shop/base.html" %}
{% load static %}
{% block title %}
{% if category %}{{ category.name }}{% else %}Products{% endif %}
{% endblock %}
{% block content %}
<div id="sidebar">
    <h3>Categories</h3>
    <ul>
        <li {% if not category %}class="selected" {% endif %}>
            <a href="{% url "shop:product_list" %}">All</a>
        </li>
        {% for c in categories %}
        <li {% if category.slug == c.slug %}class="selected" {% endif %}>
            <a href="{{ c.get_absolute_url }}">{{ c.name }}</a>
        </li>
        {% endfor %}
    </ul>
</div>
<div id="main" class="product-list">
    <h1>{% if category %}{{ category.name }}{% else %}Products
        {% endif %}</h1>
    {% for product in products %}
    <div class="item">
        <a href="{{ product.get_absolute_url }}">
            <img src="{% if product.image %}{{ product.image.url }}{%
else %}{% static "img/no_image.png" %}{% endif %}">
        </a>
        <a href="{{ product.get_absolute_url }}">{{ product.name }}</ a>
            <br>
            ${{ product.price }}
    </div>
    {% endfor %}
</div>
{% endblock %}

What I want is that in the product_list page, all the products should be displayed with their price, name and image. Everything works fine, except that the image is not displayed. No matter which image I try to take, always the alt text of the image is displayed. I have set the MEDIA_ROOT and MEDIA_URL in my settings.py:

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

And the folder specified in the image model field is also created, with the image stored in it. Then where is the problem?

Upvotes: 0

Views: 29

Answers (1)

stue
stue

Reputation: 81

You should add a url setting to your project URLs

Check it out here https://docs.djangoproject.com/en/3.1/howto/static-files/#serving-files-uploaded-by-a-user-during-development

Upvotes: 1

Related Questions