Images not showing in Chrome until I click inspect element

Solution 1:

In the CSS you need to set the width and height attributes.

Solution 2:

That is weird. Regardless, things to check:

1. Z-index: The outer box that surrounds the image might be "above" the image itself. Add z-index to the image with a value of 9999 to check
2. Position: if it's parent container or god knows what else has a weird position it could be affecting where the child element, in this case an image is appearing.
3. Disable JS - Javascript might be causing an issue here, try disabling it to check.
4. Also, when you use chrome dev tools, you are technically "hovering" on the image. And you say it suddenly appears. So I'd take a look at your :hover rules as they apply to images. A lot of sites will use a sprite technique that shows one image in normal state, and then shift the background to a different part of the same image on hover. Your normal state could be empty and the hover then moves the bkgd position to the image you want.

Let me know how this turns out.