CODEWITHSUNDEEP
pythonhtmldjangodjango-1.10
Anna Jeanine
Anna Jeanine

Reputation: 4125

Images from Model in HTML Django 1.10

I am new to Django (1.10) so please excuse me. I am trying to visualise images from my model Clothes. Trying to create some sort of small webshop to train.

My Model:

from __future__ import unicode_literals

from django.db import models
from django.utils import timezone

class Clothes(models.Model):
    user = models.ForeignKey('auth.User')
    title = models.CharField(max_length=200)
    description = models.TextField()
    image = models.ImageField(upload_to = '/pic_folder/', default = '/pic_folder/None/no-img.jpg')
    type_clothes = models.CharField(max_length=100)
    created_date = models.DateTimeField(
            default=timezone.now)
    published_date = models.DateTimeField(
            blank=True, null=True)

    class Meta:
        verbose_name = "Kleding"
        verbose_name_plural = "Kleding"

    def publish(self):
        self.published_date = timezone.now()
        self.save()

    def __str__(self):
        return self.title

Views.py

from django.shortcuts import render
from django.utils import timezone
from .models import Clothes

def clothes_overview(request):
    clothes= Clothes.objects.filter(published_date__lte=timezone.now())
    return render(request, 'Clothes/clothes_overview.html', {'clothes' : clothes})

clothes_overview.html

{% load staticfiles %}
<html>
    <head>
        <title>WebShop</title>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="{% static 'css/clothes.css' %}">
    </head>
    <body>
        <div>
            <h1><a href="/">Clothing WebShop</a></h1>
        </div>

        {% for cloth in clothes %}
            <div>
                <p>published: {{ cloth.published_date }}</p>
                <h1><a href="">{{ cloth.title }}</a></h1>
                // DISPLAY IMAGE HERE
                <p>{{ cloth.text|linebreaksbr }}</p>
            </div>
        {% endfor %}
    </body>
</html>

I have tried one option which I came across by searching Stack:

                <img src="{{ cloth.image.url }}">

This helped others but still left my page showing broken images. I looked in the source using Google Chrome and found that the path is (specific for the hoodie.jpg): 

<img src="pic_folder/hoodie.jpg">

I then tried another method: 

                <img src="{% static 'pic_folder/image.jpg' %}">

This did show the image.jpg in my browser multiple times! The path which I found is: 

<img src="/static/pic_folder/image.jpg">

I somehow need to combine these two methods so that the images are loaded dynamically into the webpage. Could someone help me?

Upvotes: 1

Views: 219

Answers (1)

Sayse
Sayse

Reputation: 43300

Djangos static template tag, allows you to pass in variables, so as you suggest - combine your approaches

<img src="{% static cloth.image.url %}">

Upvotes: 1

Related Questions