Image in own wordpress theme not showing

Question

I created my own little Wordpress theme and tried to insert an image into the header which is showing up on the hosting server but not on a client calling the website.

I've uploaded the image to the Wordpress media pool and implemented it into my code (header.php) by using the url given by wordpress like so

<a id="pic_logo" href="http://*IP*/wordpress/?page_id=105">
<img src="http://localhost/wp-content/uploads/2019/08/logo.gif" alt="logo"/>
</a>

Strangely on the server I'm hosting the XAMPP server all this is running on, I can view the website with the image displaying in the header, on other devices located on the same network, I will only see the alt-text "logo". The specified link behind the image however is still working.

Does anybody know, what I'm doing wrong?

Thanks for your help in advance. Kind regards Nik

PS: If anything is unclear, I'm not a native english speaker so please don't hesitate to ask so that I can give further explanations.

Answer 1

Your image src path is localhost. please make that path of domain. Or I suggest to do that path dynamic with the help of site_url global variable. Please also check permission of the image.

Answer 2

Is site running https? Your img link is http which might create a mixed content error where Chrome is blocking the image.

Mixed content occurs when initial HTML is loaded over a secure HTTPS connection, but other resources (such as images, videos, stylesheets, scripts) are loaded over an insecure HTTP connection. This is called mixed content because both HTTP and HTTPS content are being loaded to display the same page, and the initial request was secure over HTTPS. Modern browsers display warnings about this type of content to indicate to the user that this page contains insecure resources.

To fix mixed content make sure your image URL is https://