Anna Jeanine Anna Jeanine - 4 years ago 94
Python Question

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?

Answer Source

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

<img src="{% static cloth.image.url %}">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download