如何在Django Admin的“更改列表”页面显示上传的图片？

Question

我想在Django后台的“更改列表”页面上显示上传的图片：

下面是我的代码：

# "models.py"

from django.db import models

class Product(models.Model):
    name = models.CharField(max_length=50)
    price = models.DecimalField(decimal_places=2, max_digits=5)
    image = models.ImageField()
        
    def __str__(self):
        return self.name

# "admin.py"

from django.contrib import admin
from .models import Product

@admin.register(Product)
class ProductAdmin(admin.ModelAdmin):
    list_display = ('name', 'price', 'image',)

那么，我该如何在Django后台的“更改列表”页面上显示上传的图片呢？

Answer 1

def image_tag(self, obj):
    return u'<img src="%s" />' % obj.image

image_tag.short_description = 'Image'
image_tag.allow_tags = True

在你的 admin.py 文件中添加：

   readonly_fields = ('image_tag',)

Answer 2

更新 2020

因为这个回答最近受到了很多关注，我决定做一些小修改。根据 Django 的文档，推荐使用 format_html 这个函数。正如 @chem1st 提到的，如果你只需要在后台管理中使用，所有的内容都可以只在 admin.py 文件中完成。

我的 models.py

from django.db import models

class Product(models.Model):
    title = models.CharField(max_length=120)
    description = models.TextField()
    price = models.DecimalField(decimal_places = 2, max_digits = 20, default = 00.00)
    image = models.ImageField(upload_to=change_image_name, null=True, blank=True)

    def __str__(self):
        return self.title

我的 admin.py

from django.contrib import admin
from django.utils.html import format_html

from .models import Product

class ProductAdmin(admin.ModelAdmin):
    list_display = ('title', 'description', 'price', 'image_tag')

    def image_tag(self,obj):
        return format_html('<img src="{0}" style="width: 45px; height:45px;" />'.format(obj.image.url))

admin.site.register(Product, ProductAdmin)

更新 django 2.0.6

我在最新的 django 2.0.6 中解决了这个问题。我想在 Django 后台的列表视图中显示一个图片缩略图。

下面的图片是我默认的后台列表视图。

这是我的 models.py:

from django.db import models
from django.utils.safestring import mark_safe

# Create your models here.

class Product(models.Model):
    title = models.CharField(max_length=120)
    description = models.TextField()
    price = models.DecimalField(decimal_places = 2, max_digits = 20, default = 00.00)
    image = models.ImageField(upload_to=change_image_name, null=True, blank=True)

    def image_tag(self):
        if self.image:
            return mark_safe('<img src="%s" style="width: 45px; height:45px;" />' % self.image.url)
        else:
            return 'No Image Found'
    image_tag.short_description = 'Image'
    

    def __str__(self):
        return self.title

请注意，我必须在图片字符串上使用 mark_safe()，否则你会在 Django 后台看到转义的 HTML 代码，而不是缩略图。

最后，这是我的 admin.py

from django.contrib import admin

from .models import Product
# Register your models here.
class ProductAdmin(admin.ModelAdmin):
    list_display = ('title', 'description', 'price', 'image_tag')

admin.site.register(Product, ProductAdmin)

这里我们还需要注册 ProductAdmin 类，我之前不知道这一点，所以没有成功。

这是结果：

Answer 3

你可以创建一个模型实例的方法，给它起个不同的名字，允许输出包含HTML标签，并把这个方法作为一个列表字段。下面是一个例子：

首先，添加一个新方法，用来返回包含图片的HTML代码：

class Article(models.Model):
    ...
    def admin_image(self):
        return '<img src="%s"/>' % self.img
    admin_image.allow_tags = True

然后，把这个方法添加到列表中：

class ArticleAdmin(admin.ModelAdmin):    
    ...
    list_display = ('url', 'title', 'admin_image')