时间戳

首页 > 解决方案 > 如何显示来自 Django CharField 的图像？

python - 如何显示来自 Django CharField 的图像？

问题描述

我正在建立一个电子商务网站，并且有一系列图像可用作每个项目的照片。我遇到的问题是在 html 中显示选定的照片。照片没有上传，而是存储在静态文件夹中

这是我的模型

class Item(models.Model):
    PHOTO_CHOICES = [
        ('Fishing Rod', "fishing_rod.png"),
        ('Fishing Net', 'fishing_net.png'),
        ('Tackle Box', 'tackle_box.png'),
        ('Lure', 'lure.png'),
        ('Line', 'line.png'),
        ('Hook', 'hook.png'),
    ]
    name = models.CharField(max_length=25)
    price = models.DecimalField(max_digits=9, decimal_places=2)
    description = models.CharField(max_length=140)
    photo = models.CharField(max_length=25, choices=PHOTO_CHOICES, default='Fishing Rod')

这是显示它的html

          {% for item in items %}
          <div class="col-lg-4 col-md-6 mb-4">
            <div class="card h-100">
              <a href="{% url 'item-detail' item.id %}"><img class="card-img-top" src="{% static 'Photos/{{ item.photo }}' %}" alt="" id="photo"></a>
              <div class="card-body">
                <h4 class="card-title">
                  <a href="{% url 'item-detail' item.id %}">{{ item.name }}</a>
                </h4>
                <h5>${{ item.price }}</h5>
                <p class="card-text">{{ item.description }}</p>
              </div>
              <div class="card-footer">
                <small class="text-muted">&#9733; &#9733; &#9733; &#9733; &#9734;</small>
              </div>
            </div>
          </div>
          {% endfor %}

这是它当前显示的内容

这是它当前显示的内容

它应该看起来像这样

在此处输入图像描述

标签： pythonhtmldjango

解决方案

这个：

<a href="{% url 'item-detail' item.id %}">
     <img 
         class="card-img-top"
         src="{% static 'Photos/{{ item.photo }}' %}"
         alt="" id="photo">
</a>

调用存储在数据库中的值，它是选择元组中的第一个值。

<a href="{% url 'item-detail' item.id %}">
     <img class="card-img-top"
          src="{% static 'Photos/{{ item.get_photo_display }}' %}"
          alt="                     ^^^^^^^^^^^^^^^^^^^^^^"
          id="photo">
</a>

呈现元组中的第二项：显示值。

但是，这不起作用，因为我们不是在 HTML 中，而是在标签的一部分，所以最简单的使用方法是get_static_prefix：

<a href="{% url 'item-detail' item.id %}">
     <img class="card-img-top"
          src="{% get_static_prefix %}Photos/{{ item.get_photo_display }}"
          alt="                                ^^^^^^^^^^^^^^^^^^^^^^"
          id="photo">
</a>

推荐阅读