Django simpleui 编辑页 ImageField 不显示图片 bug 解决

上线自己做的网站时，出现了一个之前没怎么注意过的问题。在Django的某条记录的编辑页中，为了更加清晰直观的查看信息，我更希望一些图片能够以实际图片呈现，而不是像第二张图片一样只展示路径信息。上图

    对比很简单，但是问题在于之前一直都是正常的，之前使用simpleui的时候似乎从来没有出现过类似的问题，那就来看看哪里出现问题了吧。

    首先确定代码出现问题的位置，通过右键检查确定了实际效果中的路径属于一个class为 file-upload的p标签，内部就是简单的a标签，通过搜索django源码确定位置为

....env\lib\python3.8\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 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 %}

    对比已经上线的网站源码其实没有差异，再看看能够实现展示图片效果的网站，同样步骤发现显示的图片结构上和未能显示的结构有差异，之前的a标签成了一个id为imgBox的div，内部自然是img标签，那么自然是其它部分的代码对这个结构进行了修改。继续搜索imgBox关键字，查找到这个文件

....env\lib\python3.8\site-packages\simpleui\templates\admin\includes\fieldset.html

<fieldset class="module aligned {{ fieldset.classes }}">
    {% if fieldset.name %}<h2>{{ fieldset.name }}</h2>{% endif %}
    {% if fieldset.description %}
        <div class="description">{{ fieldset.description|safe }}</div>
    {% endif %}
    {% for line in fieldset %}
        <div class="form-row{% if line.fields|length_is:'1' and line.errors %} errors{% endif %}{% if not line.has_visible_field %} hidden{% endif %}{% for field in line %}{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% endfor %}">
            {% if line.fields|length_is:'1' %}{{ line.errors }}{% endif %}
            {% for field in line %}
                <div{% if not line.fields|length_is:'1' %} class="fieldBox{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% if not field.is_readonly and field.errors %} errors{% endif %}{% if field.field.is_hidden %} hidden{% endif %}"{% elif field.is_checkbox %} class="checkbox-row"{% endif %}>
                    {% if not line.fields|length_is:'1' and not field.is_readonly %}{{ field.errors }}{% endif %}
                    {% if field.is_checkbox %}
                        {{ field.field }}{{ field.label_tag }}
                    {% else %}
                        {{ field.label_tag }}
                        {% if field.is_readonly %}
                            <div class="readonly">{{ field.contents }}</div>
                        {% else %}
                            {{ field.field }}
                        {% endif %}
                    {% endif %}
                    {% if field.field.help_text %}
                        <div class="help">{{ field.field.help_text|safe }}</div>
                    {% endif %}
                </div>
            {% endfor %}
        </div>
    {% endfor %}

</fieldset>


<!--<script type="text/javascript" src="/static/admin/js/image_pro.js"></script>-->
<!--<script type="text/javascript" src="/static/admin/js/imagePreview.js"></script>-->
<script type="text/javascript">


    /**
 * Created by hucf on 2019/11/20.
 */
    <!--其他不太相关的代码-->

    var image_document = document.getElementsByTagName("a");
    console.log(image_document)
    for (var i = 0; i < image_document.length; i++) {
        let text_list = image_document[i].href.split('.')
        console.log("text_list",text_list)
        let image_list = ["jpg", "png"]
        for (let j = 0; j <image_list.length ; j++) {
            console.log("image_list[i]-====", image_list[j])
            console.log("text_list[text_list.length-1]===",text_list[text_list.length-1])
            if (text_list[text_list.length-1] == image_list[j] )
            {
                console.log("oho=====")
                var herf = image_document[i].href
                console.log(herf)
                var image_html = image_document[i].outerHTML
                image_document[i].outerHTML = '<div id="imgBox"><img style="width: 200px" id="img" src="' + herf + '"/></div>'
            }
        }
    }
    // ImagePreview.init({id:"imgBox"});
    ImagePreview.init({id:$("#imgBox img")});


</script>


<style type="text/css">
    #imgs img {
        width: 24%;
    }
</style>

    通过对比不能显示的网站源码，发现其没有script标签，也就没有内部的获取a标签以及后续的替换操作，由于逻辑粗暴，直接将这部分缺少的代码CV过去，重启就是第一张图片的效果了。

    完结撒花！！！