Recovered Wordpress installation (on localhost) links broken and images not showing

Question

I initially had a wordpress installation on a free hosting service. After the hosting suffered an attack I got a backup of all files and the database and am recovering the site on my localhost (using wampserver 3.1.0 on windows 10) before I can update it and upload it to my new hosting service.

The thing is, links are not working and some (not all) images are not displaying, not even on edit mode, and not at all (I mean, there is not a square indicating a broken image either). As for settings, I set up my wordpress url and site url (in admin console) to point to my new localhost url (http://localhost/b17_14344318). I also used Search-Replace-DB to replace all instances of my old url with my localhost url (the problems existed before I replaced the url using this script).

An example of images issue is a facebook logo image I had in my old installation. As it wasn't showing up I tried removing it from my post and re-adding, editing it (on wordpress), deleting it and re-uploading it, changing the file name and re-upload to use this "new file", removing the html code and re-writing it... I also disabled my plugins one by one, and checked if the image showed up, but it didn't. This image (as others that have the same problem) did show up when my site was up on its old hosting service, with the same plugins I have now (however, the Wordpress version I'm using now is newer than the one I had on that hosting).

After I add the image through the "add media" button, this is the code it generates:

<a href="http://localhost/b17_14344318/2543-2/fb_logo/" rel="attachment wp-att-2549"><img class="alignnone size-full wp-image-2549" src="http://localhost/b17_14344318/wp-content/uploads/2018/08/fb_logo.png" alt="" width="215" height="215" /></a>

I tried creating a new page, just in case something was corrupt in the old page I recovered from the backup, but the image is still "invisible". This is how it looks after I add the image through "Add media" button:

And this is the html code behind it:

As for links, when clicking on any item (link to a post, a page, a category, etc) I see this un-styled page:

Any ideas on what else I should try?

Answer 1

The WP database stores the URL of the uploaded media item. You can see the URL when you look at the media item on the Media page.

A move of the WP install gives the new site a new URL. But the URL for the media items in the database is not always changed, depending on how you did the move.

So, you need to do a search/replace on the database, searching for the old URL and replacing it with the new URL. You can do this manually with phpMyAdmin, but there's an easier way - as usual, 'there's a plugin for that'.

I use the 'Better Search and Replace', which is quite easy to use. It has worked well to find all instances of the old URL and replace it with the new URL. That fixes any wrong URLs in media items (and anywhere else in the WP database). It is what I use when I move a site from one place to another for any reason.

You will need to search/replace when you move the site from your local site to it's new hosting place. That's another involved process, but you will probably want to use the plugin for that, as it makes URL corrections in the database much easier.

Answer 2

Do you see the image if you put http://localhost/b17_14344318/wp-content/uploads/2018/08/fb_logo.png in the browser alone?

I recommend using relative paths at all times in your content. I.E. Drop the http://localhost from your links, image paths, CSS files, etc. So the path to your logo, from anywhere in the site, would be /b17_14344318/wp-content/uploads/2018/08/fb_logo.png

Then you never have to use any sort of search and replace tool ever again.