Изображение иногда не отображается на HTML-странице (Django 3.0)

Я создал некий клон главной страницы Instagram (для полной прозрачности, пожалуйста, знайте, что я делаю это для психологического эксперимента).

Один из моих пользователей получил очень странную ошибку: при переходе на мою страницу два изображения, казалось, не загружались (не было битой ссылки, а изображения просто пропускались, см. рисунок ниже).

Не отображается иллюстрация

При перезагрузке страницы изображения действительно появлялись нормально, и другие пользователи не получали никаких ошибок.

Дело в том, что я не совсем понимаю, как это может произойти, поскольку я показываю страницу только тогда, когда все ресурсы загружены, через эти строки кода :

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

Пожалуйста, найдите код для страницы ниже (я удалил код navbar для наглядности, пожалуйста, сообщите мне, если нужна полная версия).

<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>

А вот код для отображения одного сообщения :

{% 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>

Знаете ли вы, что может вызвать эту "ошибку"?

Я наткнулся на учебник по обнаружению того, когда все изображения загружены (см. здесь). Как вы думаете, может ли это улучшить мою ситуацию? Как вы можете ожидать, эту ошибку, к сожалению, трудно воспроизвести.

Спасибо за помощь!

Лучшие, Джессика

Зайдите settings.py в папку проекта и создайте переменные следующим образом.

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

STATICFILES_DIRS = [
    BASE_DIR / "static"
]

STATIC_ROOT = 'mtg-django/static'
Вернуться на верх