'Image sometimes does not display in HTML page (Django 3.0)

I created a somewhat clone of Instagram main page (for full transparency, please know that I do this for a psychological experiment).

One of my users got a very strange bug : when going on my page, two images seemed to not be loaded (there was no broken link, and the images simply appeared to be skipped, see illustration below).

Images not displaying illustration

On reloading the page, the images indeed appeared normally, and other users did not get any bug.

The thing is, I do not quite understand how this could happen, since I show the page only when all resources are loaded, through these lines of code :

window.addEventListener('load', function () {
    document.getElementById("main-page").style.visibility = "visible";
});

Please find the code for the page below (I removed navbar code for lisibility, please let me know if full version is needed).

<body id="main-page" style="visibility:hidden">

    <section class="main">
        <div class="wrapper">
            <div class="left-col">
                {% include 'instapp/status.html' %}
                {% include 'instapp/post.html' %}
            </div>
            <div class="right-col">
                {% include 'instapp/recommandations.html' %}
            </div>
        </div>
    </section>

    <script>

        window.addEventListener('load', function () {
            document.getElementById("main-page").style.visibility = "visible";
        });

    </script>
</body>

And here is the code for displaying a single post :

{% load static %}
<div class="post">
    <div class="info">
        <div class="user">
            <div class="profile-pic"><img src='{% static instapost.name %}' alt=""></div>
            <p class="username">{{instapost.pseudo}}</p>
        </div>
        <img src="{% static 'img/3-vertical-dots.png' %}" class="options mobile" alt="" style="display:none">
        <img src="{% static 'img/option.PNG' %}" class="options desktop" alt="" style="display:none">
    </div>
    <img src='{% static instapost.name %}' class="post-image" alt="">
    <div class="post-content">
        <div class="reaction-wrapper">
            {% include 'instapp/post_icons.html' %}
        </div>
        <p class="likes">{{instapost.likes}} J'aime</p>
        <p class="description"><span>{{instapost.pseudo}} </span> {{instapost.comment|safe}}</p>
        <p class="post-time">{{instapost.time}}</p>
    </div>
    <hr class="comment_desc_sep">
    <div class="comment-wrapper">
        <img src="{% static 'img/smile.PNG' %}" class="icon" alt="">
        <input type="text" class="comment-box" placeholder="Ajouter un commentaire">
        <button class="comment-btn">Publier</button>
    </div>
</div>

Do you know what may cause this "bug" ?

I ran into a tutorial about detecting when images are all loaded (see here). Do you think this can improve my situation ? As you may expect, this bug is unfortunately hard to replicate.

Thanks for your help !

Best, Jessica

javascripthtmldjango


Solution 1:[1]

Search settings.py into the project folder and create Variables like this.

STATIC_URL = '/static/'
MEDIA_URL = '/media/'

STATICFILES_DIRS = [
    BASE_DIR / "static"
]

STATIC_ROOT = 'mtg-django/static'

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Asif Iqbal

Related Questions