Я создаю сайт для клиента с помощью начальной загрузки, и по какой-то причине изображения, которые я использую в моих значках навигации, не всегда появляются.
Когда я впервые загружаю страницу, я замечаю, что изображения не появляются и имеют ширину 0. Если вы перезагружаете страницу, изображения появляются.
Здесь что-то происходит или я могу что-то сделать, чтобы убедиться, что они всегда здесь и у них нет такого сбоя?
Вот мой код для nav-bar:
<nav class="navbar navbar-collapse text-center navbar-expand-lg mt-4 navbar-light">
<button class="navbar-toggler nav-btn" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon float-right"></span>
</button>
<div class="collapse navbar-collapse px-0" id="navbarSupportedContent">
<ul class="navbar-nav algin-items-center d-flex ml-5 pl-5">
<li class="nav-item col-2 text-center expand-lg"><a href="#" class="nav-link">Home</a></li>
<img src="images/shapeimage_1.png" width="26" height="26" class="nav-ico after my-auto" />
<li class="nav-item col-2 text-center" id="about"><a href="#" class="nav-link">About Us</a></li>
<img src="images/dogpaw_1.png" width="26" height="26" class="nav-ico after my-auto" />
<li class="nav-item col-2 text-center" id="services"><a href="#" class="nav-link">Services</a></li>
<img src="images/icon-bowl_46.png" width="26" height="26" class="nav-ico after my-auto" />
<li class="nav-item col-2 text-center id="adopt""><a href="#" class="nav-link">Adopt</a></li>
<img src="images/heart2_3.png" width="26" height="26" class="nav-ico after my-auto" />
<li class="nav-item col-2 text-center" id="donate"><a href="#" class="nav-link">Donate</a></li>
<img src="images/icon-house_46_1.png" width="26" height="26" class="nav-ico after my-auto" />
<li class="nav-item col-2 text-center" id="events"><a href="#" class="nav-link">Events</a></li>
</ul>
</div>
</nav>
Изображения между li - это то, что иногда меняет ширину.
Обычно я открываю в Chrome, и инструменты разработчика показывают, что изображение там и не повреждено, но имеет ширину 0.
Перезагрузите страницу, и они там без проблем и обычно остаютсясуществует для каждой повторной загрузки, если только я Ctrl + F5 и принудительной полной загрузки с сервера.