Media Library Elements not Displaying on Page

I have successfully transferred my live site to Local using Duplicator, but with two exceptions. The first, having to do with two factor authentication, I will deal with in a separate topic.

In the Local copy of my site, all of the media transferred successfully (I can see all of them in the wp-content > uploads folder). They all show up in the Media Library EXCEPT that the thumbnails do not display (only the square around the reserved space and the blue box with a question mark in the middle). If I click on that entry, the actual media image DOES appear in the Edit Media page!

On any page in which I have embedded an image from the Media Library, the image does not appear. Only the square around the reserved space and the blue box with a question mark in the middle. However, the images do appear on the back end when I open the page for editing. If I click on “View Page” from the edit page to see the result, the image again does not appear.

@aschaevitz,

Please check for 404s. You can check for 404s by opening up your browser’s developer tools and then going to the “Network” tab. The “Console” tab will also usually show 404s.

Odds are that there is a domain that was not automatically replaced. By default, Local will only replace the existing site domain that’s in the wp_options's siteurl option.

One other possibility is a mixed content issue. If you’re loading the page with HTTPS but the images are being loaded as HTTP, then your browser may be blocking the images. If you’re in Chrome, there will be a shield that appears in the address bar that you can click to force the images to load.

Did not know how to do this in Safari, so I opened Chrome. Same problem. I went to the Developer’s Tools > Network > Console and see the following error in trying to load the image. It is not a 404, but a 400 apparently. “Failed to load resource: the server responded with a status of 400 ()”.

Also, on a page that should display a thumbnail, I see the error “news.png:1 GET https://i2.wp.com/sprcoalition-testing.local/wp-content/uploads/news.png?resize=50%2C50 400 ()”

These images are in the Local site’s wp-content > uploads, so I don’t understand your reference to a domain issue. I don’t even see a wp-options folder or document, but I do see several “options-xxx.php” documents in the wp-admin folder.

As for HTTPS vs. HTTP, my site is HTTP and has never been HTTPS at this point (oh, and no “shield” in the address bar).

Aha, it looks like it may be related to Jetpack. Try disabling Jetpack plugin or at least the Photon CDN in Jetpack.

Bingo! So, what is next? Why is there no problem with Jetpack on the live site but there is a conflict in Local? How do we “fix” this?

Oh, I guess there is a broader issue here. When I tried to reactivate Jetpack, I got the following error message: Error Details: Your site host “sprcoalition-testing.local” is on a private network. Jetpack can only connect to public sites.

So, I guess Jetpack has to be disabled in Local. That limitation should be “broadcast” to all potential users of Local.

Yup, exactly. Photon can only serve images from publicly accessible websites.

Agreed! We’ll look into a way to communicate this message whether it’s in Local itself or documentation.