One of my images showed a broken image link, but only on mobile devices. In all my desktop browsers, even when resizing the browser window, the image was still showing. The file path of the <img> tag was correct and there was no CSS or JS targeting the image, except for literally only a width and a margin CSS property. After searching for puzzle pieces for about an hour, I finally figured out what fixed the problem but not what caused it.
The image tag I used:
<img src="/path/to/image.png" alt="image alt tag">
What ultimately solved the problem:
<img src="/path/to/image.png" alt="image alt tag" />
(notice the / at the end of the tag)
Why does this little / make such a big difference? And why do all other images, with the exact same CSS class and file paths, show no problems? What does this / actually do?
By adding that "/" (Or "Closing Bracket") to the end of the img tag, you are validating it for XML or XHTML. HTML does not require that ending bracket (It is optional in HTML, the code will work either way), but XML/XHTML does require it.
Since your mobile browser did not show the image without the bracket, but correctly showed it with the bracket (And your PC showed it both ways), that most likely means your mobile browser is parsing the code using XML/XHTML (Where the "/" is required) and your PC is parsing it in HTML (Where the code works with, or without the "/").
Hope that helped in clarification! Comment if you don't understand something I said or would like clarification :)