时间戳

首页 > 解决方案 > Django 图像放置

html - Django 图像放置

问题描述

这就是我想要显示图片的方式

这是它的显示方式 

<div class="container" style="background-color: white; border-color: white;">
    <img class="mx-auto thumbnail" src=" {% static 'mike/Anon.png'  %} " width = 25 >
    <p > Hi how are you </p>
</div>

<div class="container" style="background-color: white; border-color: white;">

     <img class="mx-auto thumbnail" src=" {% static 'mike/Anon.png'  %} " width = 25   class="right">
     <p class="float-right">Hey! I'm fine. Thanks for asking!</p>
</div>

它适用于普通 HTML，但不适用于 Django。请帮忙。

标签： htmldjango

解决方案

试试这个：在你的模板中：

{% for a in image_table %}
    {% if  a.image %}
         <td><img src="{% static 'app_image/'|add:a.image %}" style="width:50%;cursor:pointer" onclick="onClick(this)" class="w3-hover-opacity"></td>
    {% else %}
        <td>No image</td>
    {% endif %}
{% endfor %}



<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
  <span class="w3-closebtn w3-hover-red w3-text-white w3-xxlarge w3-container w3-display-topright">&times;</span>
  <div class="w3-modal-content w3-animate-zoom">
    <img id="img01" style="width:100%">
  </div>
</div>

<script>
function onClick(element) {
  document.getElementById("img01").src = element.src;
  document.getElementById("modal01").style.display = "block";
}
</script>

在您的应用程序（示例名称：app_image）目录中创建文件夹：static/app_image

并将其添加到您的 settings.py 中：

STATIC_URL = '/static/'
STATIC_ROOT = "/static/"
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),]

推荐阅读