Website Only Shows Text Content With All Graphics Missing

Posted: 2014-06-11 19:11:44

My site looks perfect from localhost (and LAN), but not from the internet. Why can’t I see CSS/styles and images on my pages?

The quick answer is that all of your generated links in the HTML source of the page are still using local addresses (usually “localhost”)…

Fix Local Resolve

Load your website in a Browser (Chrome, IE, Firefox) from outside, right click on the page, and select ‘View Page Source’, and you will see that all links to the CSS (style) and Graphic content (images) are either:

  1. Of the form http://localhost/ or http://127.0.0.1/ or http://192.168.0.xx/
  2. Or using a domain name that is made up or does not have proper global DNS set up.

None of these locations/URLs are reachable from outside. They are only reachable from the server (i.e., the local system), and/or possibly only within the LAN.

You have to use a working domain name for the website [that is not localhost (127.0.0.1) nor the LAN IP].

The domain name should resolve to the public IP address of the server, and all requests to that IP address should be properly routed and unrestricted to the server.

Update WordPress Address

With WordPress originally installed on “localhost”, you’ll need to go into WordPress Setting, General tab, and change the “WordPress Address” and “Site Address” to something other than “localhost” or the LAN IP (e.g., to an address that can be reached from outside).

If you don’t have a domain name, you can use your public IP address (the address assigned to the router), but this would also require you to make sure this IP is port-forwarded from the router to the LAN system.

Browser Hard-Refresh

When you test your website from outside, make sure to hard-refresh the page (in your Browser) by pressing Ctrl-F5 so everything is reloaded each time and you don’t get cached pages and old results.