Mettre des images dans un formulaire django

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

j'aimerai réaliser un formulaire sur django afin de pouvoir voter parmis 2 images proposés.

Pour cela j'ai crée le model suivant comportant 2 tables, la table question et la table choix

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Question(models.Model):
	question_text = models.CharField(max_length=200)
	pub_date = models.DateTimeField('date published')
	def __str__(self):
		return self.question_text
	def was_published_recently(self):
		return self.pub_date >= timezone.now() - datetime.timedelta(days=1)
 
 
class Choice(models.Model):
	question = models.ForeignKey(Question, on_delete=models.CASCADE)
	choice_image = models.ImageField()
	def image_tag(self):
		return mark_safe('<img src="%s" width="150" height="150" />' % (self.image))
	image_tag.short_description = 'Image'
	image_tag.allow_tags = True
	votes = models.IntegerField(default=0)

ensuite, via l'API de django, j'ai implémenté 2images dans ma base:

Code:

1
2
3
4
5
6
7
 
>>> from tryfit.models import Choice, Question
>>> from django.core.files import File
>>> q = Question.objects.get(pk=1)
>>>  c = q.choice_set.create(choice_image=('static/media/point.jpg'), votes=0)
>>>  c = q.choice_set.create(choice_image=('static/media/trait.jpg'), votes=0)
>>> c.save()

pour finir, voici mon formulaire:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'tryfit/style.css' %}" />
<div id="detail" >
<h1>{{ question.question_text }}</h1>
 
{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
 
<form action="{% url 'tryfit:vote' question.id %}" method="post">
{% csrf_token %}
{% for choice in question.choice_set.all %}
    <input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}" />
    <label for="choice{{ forloop.counter }}">{{ choice.choice_image }}</label><br />
{% endfor %}
<input type="submit" value="Vote" />
</form>
 
</div>

mais le problème c'est que les images ne s'affichent pas, voici ce que j'obtiens:
Pièce jointe 286286

A noter que je n'ai pas toucher a ma variable MEDIA_ROOT dans le setting.

Merci pour votre aide ;)

16/06/2017, 17h43
wiztricks

Salut,

Citation:

Envoyé par sahbi59

Merci pour votre aide ;)

Un serveur Web comme Django fabrique des pages HTML qui seront affichées par un navigateur Web.
La première question à vous poser est à quoi peut ressembler une page HTML qui "contient" (affiche) des images. Et cela n'a rien à voir avec Django ou Python.

- W
19/06/2017, 17h22
sahbi59

Je n'ai pas très bien compris votre idée?
Pouvez-vous m'éclairer sur le sujet?
Merci :D
19/06/2017, 17h55
bistouille

Le truc est flagrant, ce sont les alt des tags images qui sont affichés, et cela se produit lorsque les image sont introuvables, donc une rectification des chemins vers tes images s'impose, soit en jonglant avec les chemins relatifs, ou soit en utilisant des chemins absolus.

1 pièce(s) jointe(s)

Problème résolu, en fait je n'avais pas mis de balise image dans mon formulaire car je ne savais pas qu'il y avait juste le nom de l'image qui s'enregistrais dans la base de données.
Du coup j'ai rajouté la balise img dans mon formulaire en mettant le bon chemin relatif et ça a fonctionné.
Merci à vous 2 pour vos réponses. :D

ps voici le code de mon formulaire à présent:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 {% load static %} <link rel="stylesheet" type="text/css" href="{% static 'tryfit/style.css' %}" /> <div id="detail" > <h1>{{ question.question_text }}</h1> {% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %} <form action="{% url 'tryfit:vote' question.id %}" method="post"> {% csrf_token %} {% for choice in question.choice_set.all %} <input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}" /> <label for="choice{{ forloop.counter }}"><img src="../../static/tryfit/images/{{choice.choice_image }}" width="100px" height="150px" ></label><br /> {% endfor %} <input type="submit" value="Vote" /> </form> <img src="../../static/tryfit/images/django.jpg" width="100px"/> </div>
et voici le rendu :
Pièce jointe 287700