I have a self-hosted Ghost instance that uses a modified Dawn theme.
I added a new image to the theme “assets” folder and included it using <img src="{{asset 'images/bla.png'}}" />
Image shows up fine when developing locally, but when I push the changes to the server, it doesn’t load.
I checked the folder on the server and the image is there.
If I try to load the image in the browser, by just pasting its URL in the address bar, server returns 200, but image doesn’t load - it shows the default browser placeholder.
My hunch was that this was a permissions issue, so I did chmod 00775
on the image file and then ghost restart
, but this did not solve the issue.
I’m a bit at a loss about what to try next 
1 Like
Try this
<img src="/assets/images/bla.png" />
What do the DevTools in the browser (elements, console …) say?
Where did you include the image:
In the theme ('*.hbs file) or in a post (HTML) …
Is the “url” of config.production.json on the server correct?
I checked and the HTML is already <img src="/assets/images/bla.png?v=932db264d7">
, so the asset
helper works correctly.
I Included the img
tag in an hbs
file. The server URL is also correct in config.production.json
.
If I manually try to load the image, using the path it should have, it still doesn’t load. This is why my first thought was to look at the file permissions.
can you link the site? that might be informative.
Sure! It’s reactpractice.dev.
You can see the image not loading on posts, like this one: Build a restaurant reservation widget
If you scroll all the way down, in the “Subscribe” box, the image on the right side does not load.
So that link goes to: https://reactpractice.dev/assets/images/react-practice-calendar.png?v=932db264d7
When I visit that link, I get a corrupted image.
Any chance you’re using Gulp to assemble your theme? (This is true for many themes.) A recent release of gulp can corrupt images depending one the settings used. I wonder if that’s what’s going on here. If you have direct server access, try dropping a fresh (and known good!) image on the server, perhaps. Otherwise, this thread might help: Upgrade to gulp 5.0 breaks building theme assets (corrupted fonts, images, etc)
Actually, yeah, I’m pretty sure that’s it, because I also see errors for loading fonts… check that out - if’s got a solution – or downgrade to gulp 4.x.
And now, my cloud deploy is done and I’m outa getting back to (paid) work!
Oh my god, this was the issue! I set encoding to false in gulpfile.js
and the image is now correctly rendered 
Thank you so much for your help, I would have never figured this out by myself 
2 Likes