在html模板中显示由管理员上传的图像

Question

我是django的新手，但我看到了解决问题的方法，但没有一个有效。

如您在models.py的Item类中看到的，我让管理员上传图像：

from django.db import models
from django.contrib import admin


class Customer (models.Model):
    username = models.CharField(max_length=500)
    email = models.CharField(max_length=1000 , unique=True)
    phone = models.IntegerField()
    address = models.CharField(max_length=3000)


class Category(models.Model):
    category_title = models.CharField(max_length=100 , unique=True)

    def __str__(self):
        return self.category_title


class Order (models.Model):
    time = models.DateTimeField(auto_now_add=True)
    total = models.IntegerField()
    created_by = models.ForeignKey(Customer, related_name='orders')


class Item (models.Model):
    name = models.CharField(max_length=100 ,unique=True)
    details = models.CharField(max_length=1000)
    price = models.IntegerField()
    item_logo = models.ImageField(upload_to='res/static/res/images')
    category = models.ForeignKey(Category, related_name="items" ,on_delete= models.CASCADE)

    def __str__(self):
        return self.name


class ItemInline(admin.TabularInline):
    model = Item

class CategoryAdmin(admin.ModelAdmin):
    inlines = [
        ItemInline,
    ]

因此，如何使这些图像显示在HTML中（请注意：html代码可以正常工作，但是会出现一个小的默认图像字段而不是image）：

{% extends 'res/menu.html' %}
{% block content %}
<h1>hello</h1>

    <table class="table table-striped table-bordered" style="text-align: left ; border-color: black;" id="pizza_table">
        <tbody>
            {% for item in items %}
                <td>
                    {{ item.name }}
                    <p>{{ item.details }}</p>
                </td>
                <td>
                    <img src="{{item.item_logo}}">
                </td>
                <td>

                </td>
                <td>
                    <button type="button" class="btn btn-success" style="margin: 5px ;" onclick="additem('Seafood Pizza', 20 ) ;">Add</button>
                </td>
            {% endfor %}
        </tbody>
    </table>

{% endblock %}

提前致谢

Answer 1

来自文档的 Qoute：

在模型中使用FileField或ImageField（请参见下文）需要执行以下步骤：

在您的设置文件中，您需要将MEDIA_ROOT定义为您希望Django存储上载文件的目录的完整路径。 （为了提高性能，这些文件未存储在数据库中。）将MEDIA_URL定义为该目录的基本公共URL。 确保该目录可由Web服务器的用户帐户写入。

将FileField或ImageField添加到模型中，定义upload_to选项，以指定用于上载文件的MEDIA_ROOT的子目录。

将存储在数据库中的所有文件都是该文件的路径（相对于MEDIA_ROOT）。 您很可能想使用Django提供的便捷url属性。 例如，如果您的ImageField名为mug_shot，则可以使用{{object.mug_shot.url}}在模板中获取图像的绝对路径。

另外，您还需要修改URL以在开发过程中提供媒体文件。

因此，您需要在设置文件中添加MEDIA_ROOT和MEDIA_URL ：

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

添加到URL文件：

urlpatterns = [
    # ... the rest of your URLconf goes here ...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

并在模板内添加url方法：

<img src="{{item.item_logo.url}}">