1

私は Django (1.10) が初めてなので、ご容赦ください。モデルの服から画像を視覚化しようとしています。トレーニング用にある種の小さなウェブショップを作成しようとしています。

私のモデル:

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>

スタックを検索して出くわした1つのオプションを試しました：

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

これは他の人を助けましたが、それでも私のページには壊れた画像が表示されていました。Google Chrome を使用してソースを調べたところ、パスは (hoodie.jpg に固有) であることがわかりました。

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

次に、別の方法を試しました。

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

これにより、ブラウザに image.jpg が複数回表示されました。私が見つけたパスは次のとおりです。

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

画像が Web ページに動的に読み込まれるように、これら 2 つの方法を組み合わせる必要があります。誰かが私を助けることができますか？

4

1 に答える 1