Table of contents
1. The picture preview function of the admin background list page
Two, admin background modification/details page picture preview function
2. Add the following code to the admin.py file:
1. Problem with pictures on the list page: On the admin list page, when you directly fill in the picture field in list_display, what is displayed on the list page is not a picture, but a picture link, and you cannot actually preview and view the picture:
The modified preview image function of the list page:
2. Problem with modifying/details page pictures: In the admin background, the uploaded picture is only a path address by default, and there is no picture preview, which is very inconvenient, so it is necessary to display the preview of the uploaded picture under this page.
Uploaded multiple image previews:
1. The picture preview function of the admin background list page
You only need to write a custom method in the class that inherits admin.ModelAdmin in admin.py, and then fill in the method name in 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))Finally, register as an admin, and you can view the previewed pictures on the list page.
Two, admin background modification/details page picture preview function
1. Add html front-end code
Create a new templates/admin/change_form.html file under the project and add the following content:
{% 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 %}
There are codes similar to 12 img tags above, which can display up to 12 uploaded image previews
{% if image_preview_url %}
<img id="image-preview" src="{
{ image_preview_url }}" alt="预览" width="16%" />
{% endif %}2. Add the following code to the admin.py file:
# 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'] is the link address of the picture, which is used to judge if there is such a link in the change_form.html file, and if there is, the img tag will be displayed to display the picture preview.
Finally, register the admin, and you can see the preview function of the uploaded pictures in the admin background.