Images appearing in preview but not in published article

Developer help
1

Hi, I’ve been having an issue at my blog – http://rtalbert.org – for some time now where, when I upload images into a post, they appear in the preview and in some browsers but will appear as broken-image icons or not appear at all in others, particularly Chrome. I am running Ghost v3.36, hosted on Digital Ocean. This has been going on since before the last time I updated on October 15.

This just happened in my latest post: Retrieval practice: Better to space it out, or keep it together? Here’s one place where it happens:

download (33)
download (33)860×235 31.2 KB

And here’s the preview of the post at the same point in the article:

download (34)
download (34)933×535 62.2 KB

The preview of the post shows the image, and I can see the image if I open up the post on Microsoft Edge, but on Chrome (both regular and incognito windows) I get the broken-image icon you see above.

Ghost was installed using the one-click install process at Digital Ocean but I do all the updates by hand from the CLI. I can try to look up other info if it helps, but I am not a whiz at all the back-end stuff.

2

The image URL is using http. Changing it to https will solve the issue. Probably there is something you can do to force the image to always use https.

3

This is happening to me too trying to use the Gallery card. I don’t see how to change it to use https?

4

Also, double-check and make sure the URL config is using https.

1 Like
5

Looking at the source for my page with the gallery it is indeed using http, how do I tell the gallery to use https? This is new behavior, I’ve had this site running for at least a year now and haven’t had trouble until I tried this post.

6

Edit: updating config.production.json to use https worked for me, thank you @ahmadajmi

1 Like
7

@Wint Can you share specifically what change you made to the config.production.json? I reviewed the page linked above and didn’t see something specfic to using https for images. Thanks!

8

The world is shifting towards https-only. Browser manufacturers are getting stricter and stricter with “mixed” http and https content, which is why you’re seeing images stopping working - it’s not something we’re changing.

If you setup your site with the URL set to http, then your site might serve content over http or https depending on how your web server is configured and what you request.

Best practice in 2021 is to always set your URL to https. Your admin panel should always be loaded over https. Ghost CLI does all this for you. We will eventually deprecate using http completely - we basically only use http mode for development internally and probably have done for about 2 years now.

Note: there’s no image-specific setting, it’s your URL in config that should be configured to use https.

2 Likes
9

I believe the change I made was to the url key at the top of that file, but it’s been a while now and I don’t remember for sure. Sorry!

10

No worries – thanks, will check that out

11

Hi, where is config.production.json located? I can’t see this in my theme files. I’m hosting in Digital Ocean. Thanks!

edit: ok, sorry got the info here Config.production.json
Although mine is already set to https but I’m still getting no preview image in the gallery…so I’m not sure where to change the gallery setting.