ValueError at /category/ The 'image' attribute has no file associated with it

Question:

I am building an Ecommerce website in Django for the first time. Some how despite following the YT tutorial, I am not able to render image that are uploaded from my Django Admin Panel.
Here are my codes:

  1. Models.py
class Product(models.Model):
    name = models.CharField(max_length=200, null=True)
    price = models.FloatField()
    image = models.ImageField(null=True, blank=True, upload_to='image/')

    def __str__(self):
        return self.name
  1. Views.py
def category(request):
    products = Product.objects.all()
    context = {"products":products}
    return render(request,'store/category.html', context)
  1. category.html
{% for product in products %}

<div class="col-lg-4 col-md-6">
    <div class="product__item">
        <div class="product__item__pic set-bg" data-setbg="{{product.image.url}}">
            <div class="label new">New</div>
            <ul class="product__hover">
                <li><a href="{{product.imageURL}}" class="image-popup"><span class="arrow_expand"></span></a></li>
                <li><a href="#"><span class="icon_heart_alt"></span></a></li>
                <li><a href="#"><span class="icon_bag_alt"></span></a></li>
            </ul>
        </div>
        <div class="product__item__text">
            <h6><a href="#">{{product.name}}</a></h6>
            <div class="rating">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
            </div>
            <div class="product__price">${{product.price|floatformat:2}}</div>
        </div>
    </div>
</div>
{% endfor %}
  1. settings.py
STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

MEDIA_URL = '/media/'

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

Error I get:
error screenshot

Please Help. Thank you.

I tried to render images in django by following along a Youtube Tutorial.

Asked By: Gyabhu

||

Answers:

Django shows an error when the file is not associated with the image field. While saving the object of Product model, make sure to add an image file to the field.
You can use the following snippet :

<div class="product__item__pic set-bg" data-setbg="{% if product.image %}{{product.image.url}}{% endif %}">
Answered By: Manoj Kamble