images sometimes default to 0 width - html

Question

I am building a site for a client using bootstrap and for some reason the images I use in my nav-icons don't always appear.
When I first load the page, I notice that the images don't appear and have a width of 0. If you re-load the page the images show up.
Is there something going on here or something I can do to make sure they are always there and don't have that hiccup?
Here is my code for the 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">Home</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">About Us</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">Services</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"">Adopt</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">Donate</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">Events</li>
</ul>
</div>
</nav>
The images between the li are what sometimes change width.
I typically open in chrome and the developer tools show that the image is there and unbroken, but has a width of 0.
Reload the page and they are there without any problems and generally remain there for each re-load unless I Ctrl + F5 and force a full load from the server.

Answer 1

Ok, after looking at the comments and doing some trial and error, it seems simply adding <li> to the img tag is enough to make them consistently stay put. They still collapse at my breakpoint and work as I want them to without any obvious side effects. Thank you #Bogdan Lapchenkov for the idea and the suggestion. I'd up your answer if it were an answer mate.