Django image placement - html

Question

this is how I want to display the pictures
this is how it is displayed
<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>
It works in normal HTML but not with Django. Please Help.

Answer 1

Try this:
In your template:
{% 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">×</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>
In your App (exempale name:app_image ) repertory create folder: static/app_image
And add this in your settings.py:
STATIC_URL = '/static/'
STATIC_ROOT = "/static/"
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),]