django admin后台列表页、详情页图片预览功能

湿透剪自布

已于 2023-08-04 09:18:25 修改

阅读量2.2k

点赞数 1

分类专栏： django 文章标签： django python 后端

于 2023-05-25 10:21:10 首次发布

本文链接：https://blog.csdn.net/qq_37140721/article/details/130861033

版权

django 专栏收录该内容

28 篇文章

订阅专栏

该博客主要介绍了Django Admin后台列表页和详情页的图片预览功能实现。针对列表页展示图片链接、详情页无图片预览的问题，分别给出解决方案。列表页在admin.py自定义方法并注册；详情页需添加HTML前端代码和在admin.py添加代码，最后注册实现图片预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、admin后台列表页的图片预览功能

二、admin后台详情页图片预览功能

1，添加html前端代码

2、在admin.py文件中添加以下代码：

需求：

1.列表页图片问题：在admin列表页中，直接在list_display中填写图片字段时在列表页展示的并不是一张图片，而是图片链接，无法真实预览查看图片：

列表页修改后的预览图片功能：

2.详情页图片问题：在admin后台中，默认查看上传的图片只是一个路径地址，没有图片预览，很不方便，所以需要在这个页面下显示上传图片的预览。

修改后上传的多张图片预览：可以在详情页直接查看到图片的预览图了

一、admin后台列表页的图片预览功能

只需要在admin.py中继承admin.ModelAdmin的类中自定义写一个方法即可，再将方法名填入到list_display中

class QrCodeAdmin(admin.ModelAdmin):

    list_display = ('get_image', 'create_time')


    def get_image(self, obj):
        return format_html('<img src="{}" width="15%" height="15%" />'.format(obj.img.url))

最后将admin注册一下，即可在列表页查看到预览的图片。

二、admin后台详情页图片预览功能

1，添加html前端代码

在项目下新建templates/admin/change_form.html文件，添加以下内容：

{% extends "admin/change_form.html" %}

{% block extrahead %}
    {{ block.super }}
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
{% endblock %}

{% block field_sets %}
    {{ block.super }}
    <fieldset>
        <legend></legend>
        {% if image_preview_url %}
            <img id="image-preview" src="{{ image_preview_url }}" alt="预览" width="16%" />
        {% endif %}
        {% if image_preview_url2 %}
            <img id="image-preview2" src="{{ image_preview_url2 }}" alt="预览" width="16%" />
        {% endif %}
        {% if image_preview_url3 %}
            <img id="image-preview3" src="{{ image_preview_url3 }}" alt="预览" width="16%" />
        {% endif %} 
        {% if image_preview_url4 %}
            <img id="image-preview4" src="{{ image_preview_url4 }}" alt="预览" width="16%" />
        {% endif %}
        {% if image_preview_url5 %}
            <img id="image-preview5" src="{{ image_preview_url5 }}" alt="预览" width="16%" />
        {% endif %}
        {% if image_preview_url6 %}
            <img id="image-preview6" src="{{ image_preview_url6 }}" alt="预览" width="16%" />
        {% endif %}

        <br>

        {% if image_preview_url7 %}
            <img id="image-preview7" src="{{ image_preview_url7 }}" alt="预览" width="16%" />
        {% endif %}
        {% if image_preview_url8 %}
            <img id="image-preview8" src="{{ image_preview_url8 }}" alt="预览" width="16%" />
        {% endif %}
        {% if image_preview_url9 %}
            <img id="image-preview9" src="{{ image_preview_url9 }}" alt="预览" width="16%" />
        {% endif %}
        {% if image_preview_url10 %}
            <img id="image-preview10" src="{{ image_preview_url10 }}" alt="预览" width="16%" />
        {% endif %}
        {% if image_preview_url11 %}
            <img id="image-preview11" src="{{ image_preview_url11 }}" alt="预览" width="16%" />
        {% endif %}
        {% if image_preview_url12 %}
            <img id="image-preview12" src="{{ image_preview_url12 }}" alt="预览" width="16%" />
        {% endif %}

    </fieldset>
{% endblock %}

{% block extrajs %}
    {{ block.super }}
    <script>
        $(document).ready(function() {
            // 监听图片文件选择事件
            $('input[name="image"]').change(function() {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#image-preview').attr('src', e.target.result);
                }
                reader.readAsDataURL(this.files[0]);
            });
        });
    </script>
{% endblock %}

以上有类似12个img标签的代码，最多能展示12张上传的图片预览

{% if image_preview_url %}
    <img id="image-preview" src="{{ image_preview_url }}" alt="预览" width="16%" />
{% endif %}

2、在admin.py文件中添加以下代码：

# admin后台详情页/修改页图片预览功能
    change_form_template = 'admin/change_form.html'

    def change_view(self, request, object_id, form_url='', extra_context=None):
        extra_context = extra_context or {}
        obj = self.get_object(request, object_id)
        # 多张图片处理，渲染到图片预览显示
        imgs = obj.imgs.all()
        show_img_list = [img.show_img.url for img in imgs]  # 展示图
        detail_img_list = [img.detail_img.url for img in imgs]  # 详情图
        for index, url in enumerate(show_img_list):
            if index == 0:
                extra_context['image_preview_url'] = show_img_list[index]
            else:
                extra_context['image_preview_url' + str(index + 1)] = show_img_list[index]

        for index, url in enumerate(detail_img_list):
            extra_context['image_preview_url' + str(index + 7)] = detail_img_list[index]

        return super().change_view(request, object_id, form_url, extra_context=extra_context)

extra_context['image_preview_url'] 就是图片的链接地址，用于change_form.html文件里if的判断是否有这个链接，有就展示img的标签显示图片预览。

最后将admin注册，即可在admin后台里看到上传的图片有预览功能了。