I am facing an issue with displaying two images in HTML. The first image is showing up without any problem, but the second one is not visible. I even tried replacing the second image with a different one from the same path, but it still doesn't show. Both images are located in the same directory.
<a class="navbar-brand" href="#">
<img id="borderIcono" th:src="@{/images/icono_prueba.png}" width="60" height="60" alt=""/></a>
<button ng-click="cargando = true" ng-disabled="cargando">
<img th:src="@{/images/redo.png}" class="redoBoton"/>
</button>
Even after moving the second image outside the button and removing the class attribute, it still remains invisible. This rules out any CSS-related issues.
I have experimented with switching the positions of the two images, only to find that the one originally displayed continues to show while the other one stays hidden. Upon inspecting the page, the browser indicates that the second image failed to load.
Despite both images being present in the same folder, it seems like there is some accessibility issue preventing the second image from being rendered.