如何在后台列表页面和编辑页面让ImageField类型显示图片

作者:cn-jack 362 浏览 0 评论 发布时间:2020-01-03 15:07:22

1)需要重写两个模版文件(clearable_file_input.html,table.html )

模版目录结构

templates
    -- admin
            -- results
                   -- table.html
            -- widgets
                    -- clearable_file_input.html

2)重写模版clearable_file_input.html, 在编辑页面增加图片显示(site-packages/django/contrib/admin/templates/admin/widgets/clearable_file_input.html)

{% if widget.is_initial %}
<p class="file-upload">{{ widget.initial_text }}: <a href="{{ widget.value.url }}">{{ widget.value }}</a>
    {% if widget.attrs.accept == 'image/*' %}
    <image src='{{ widget.value.url }}' style='display:block;max-width:300px;max-height:300px;padding:10px 0;'></image>
    {% endif %}
    {% if not widget.required %}
    <span class="clearable-file-input">
        <input type="checkbox" name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}">
        <label for="{{ widget.checkbox_id }}">{{ widget.clear_checkbox_label }}</label></span>{% endif %}<br>
    {{ widget.input_text }}:{% endif %}
    <input type="{{ widget.type }}" name="{{ widget.name }}" {% include "django/forms/widgets/attrs.html" %}>{% if widget.is_initial %}
</p>
{% endif %}

新增代码

{% if widget.attrs.accept == 'image/*' %}
<image src='{{ widget.value.url }}' style='display:block;max-width:300px;max-height:300px;padding:10px 0;'></image>
{% endif %}

3)重写table.html,在列表页面显示图片(site-packages/simplepro/templates/admin/results/table.html)

<el-alert v-if="table.selection.length!=0" class="table-tips" type="success" show-icon>
    <div slot="title">
        <span>已选择 <strong v-text="table.selection.length">0</strong></span>
        <el-link style="margin-top: -3px;" type="primary" @click="clearSelect()">清空</el-link>
    </div>
</el-alert>
<el-alert v-if="showError" style="margin-bottom: 5px" :title="errorMsg?errorMsg:'加载数据报错,请检查{{ cl }}中的代码。'" type="error" :closable="false" show-icon>
</el-alert>
<transition name="el-fade-in-linear">
    <el-table v-if="table.headers.length!=0" ref="table" :data="table.rows" stripe border v-loading="loading" @sort-change="sortChange" @select="select" @select-all="selectAll" {% if has_change_permission and has_editor %} @row-dblclick="dbclick" {% endif %} :header-row-class-name="'default-header'" size="mini" style="width: 100%">
        <el-table-column type="selection" align="center" fixed="left" width="45">
        </el-table-column>
        <template v-for="h in table.headers">
            <el-table-column v-if="h.name == 'id' && exts.showId && h.show" :prop="h.name" :label="h.label" :sortable="h.sortable" :align="h.align||'center'" :width="h.width" :min-width="h.min_width" :resizable="h.resizable" :class-name="h.class_name" :label-class-name="h.label_class_name" :fixed="h.fixed">
                <template slot-scope="scope">
                    <div class="cell-body" v-html="scope.row[h.name]"></div>
                </template>
            </el-table-column>
            <el-table-column v-else-if="h.show" :prop="h.name" :label="h.label" :sortable="h.sortable" :align="h.align||'center'" :width="h.width" :min-width="h.min_width" :resizable="h.resizable" :class-name="h.class_name" :label-class-name="h.label_class_name" :fixed="h.fixed">
                <template slot-scope="scope">
                    <el-switch disabled v-if="typeof scope.row[h.name]=='boolean'" v-model="scope.row[h.name]"> </el-switch>
                    <div class="cell-body" v-else-if="scope.row[h.name] && h.image">
                        <image :src="{{MEDIA_URL}} + scope.row[h.name]" style="max-width:100px;max-height:100px"></image>
                    </div>
                    <div class="cell-body" v-else v-html="scope.row[h.name]"></div>
                </template>
            </el-table-column>
        </template>
        {% if has_change_permission or has_delete_permission %}
        <el-table-column v-if="exts.actions_show" :fixed="table.actionFixed" label="操作" align="center" width="150">
            <template slot-scope="scope">
                {% if has_change_permission %}
                <el-button size="mini" icon="el-icon-edit" :underline="false" style="padding: 6px" @click="edit(null,scope.row._id)">编辑</el-button>
                {% endif %}
                {% if has_delete_permission %}
                <el-button size="mini" type="danger" icon="el-icon-remove-outline" :underline="false" style="padding: 6px" @click="deleteData(scope.row._id)">删除</el-button>
                {% endif %}
            </template>
        </el-table-column>
        {% endif %}
    </el-table>
</transition>

新增代码

<div class="cell-body" v-else-if="scope.row[h.name] && h.image">
    <image :src="{{MEDIA_URL}} + scope.row[h.name]" style="max-width:100px;max-height:100px"></image>
</div>

这个功能,需要app的admin.py里面增加一个属性进行配合

fields_options = {
    'qrcode': {
        'image': True
    },
}

Loading...
评论列表 0条评论
暂时没有评论