Images are braking with Casper 2.9.3

[pascalandy]

Issue Summary

Images are braking with Casper 2.9.3

To Reproduce

Start a brand new installation of Ghost 2.16.4

Good

Using Casper 2.7.1 everything is fine.

bad

Using Casper 2.9.3, thing brakes

open image in a new tab

When I do this, the image loads in the tab

config

Technical details:

• Ghost Version: 2.16.4
• CLI version: 1.9.9
• Node Version: 10.15.1
• Browser: Chrome 71
• OS X: 10.13.6
• Server: Docker using this image
• Database: SQLite

[morrolinux]

Same here. I just fresh-installed ghost with the latest docker image.
It seems like it's looking for different image resolutions but none of them are found:

<a class="post-card-image-link" href="/openvpn-con-stunnel/">
        <img class="post-card-image" srcset="http://blog.morrolinux.it/content/images/size/w300/2019/03/wallpaper.png 300w,
                    http://blog.morrolinux.it/content/images/size/w600/2019/03/wallpaper.png 600w,
                    http://blog.morrolinux.it/content/images/size/w1000/2019/03/wallpaper.png 1000w,
                    http://blog.morrolinux.it/content/images/size/w2000/2019/03/wallpaper.png 2000w" sizes="(max-width: 1000px) 400px, 700px" src="http://blog.morrolinux.it/content/images/size/w600/2019/03/wallpaper.png" alt="OpenVPN + stunnel Contro i Firewall con Deep Packet Inspection">
    </a>

Infact, after uploading a post image and publishing, none of those paths are present on my filesystem, like the original image is not being resized to w300, w600, ... , to the relative folders

[allouis]

I just ran a fresh install of Ghost and i'm not seeing this issue - Do you only see this issue when running Ghost inside of Docker?

[allouis]

@morrolinux All of those links to images you pasted are resolving for me - did you update your Ghost instance?

[allouis]

@pascalandy Can you include the request/response pairs for both the broken image request and the successful one in a new tab please?

[morrolinux]

@allouis Ok I must have got confused, sorry. The files are there as you pointed out, the problem is just they don't get loaded as this issue states

[pascalandy]

I run all my apps in a container since more than 2 years.

Do you only see this issue when running Ghost inside of Docker?

[pascalandy]

logs

ghostdemo@vps1 | INFO [2019-03-07 14:05:48] "GET /demotusk/" 200 52ms
ghostdemo@vps1 | INFO [2019-03-07 14:05:48] "GET /demotusk/assets/built/screen.css?v=c3a791c30a" 200 3ms
ghostdemo@vps1 | INFO [2019-03-07 14:05:48] "GET /demotusk/assets/built/jquery.fitvids.js?v=c3a791c30a" 200 3ms
ghostdemo@vps1 | INFO [2019-03-07 14:05:48] "GET /demotusk/assets/built/infinitescroll.js?v=c3a791c30a" 200 3ms
ghostdemo@vps1 | INFO [2019-03-07 14:05:49] "GET /demotusk/content/images/size/w2000/2019/03/city-header.jpg" 200 90ms
ghostdemo@vps1 | INFO [2019-03-07 14:05:59] "GET /demotusk" 301 4ms
ghostdemo@vps1 | INFO [2019-03-07 14:06:00] "GET /demotusk/my-first-post/" 200 68ms

In container

/var/lib/ghost/content/images/size/w2000/2019/03 # ls
city-header.jpg
/var/lib/ghost/content/images/size/w2000/2019/03 # echo; pwd; echo; ls -AlhF; echo; du -sh *; echo; du -sh;

/var/lib/ghost/content/images/size/w2000/2019/03

total 232
-rw-r--r--    1 node     node      228.7K Mar  7 14:05 city-header.jpg

232.0K	city-header.jpg

On host

ghostdemo@vps1:/home/demo1/ghost/content/images/size/w2000/2019/03# l
city-header.jpg

Same conclusion for me.

The files are there as you pointed out, the problem is just they don't get loaded as this issue states

Remember that all other Ghost themes are loading all images correctly.

[allouis]

I run all my apps in a container since more than 2 years.

Yeah, I was more trying to diagnose the problem, I haven't replicated this issue outside of Docker, was wondering if you could?

Thanks for the logs, I think the problem here is in the browser though, as the files exist, and the load in a new tab, just not inline in the html - is that correct?

The request and response pairs from the network tab would be useful here for figuring out what is going on, as well as information about which browsers you're seeing the issue in, is it just Chrome?

[pascalandy]

correct

as the files exist, and the load in a new tab, just not inline in the html - is that correct?

network tab

Sure, I just don't know what to share. Please give me an example :)

[allouis]

If you have the network tab open when you load a page, you should see some requests for the images that are failing, if you then click on the request a panel will open showing the request and response headers, and some other information.

If you have the tab open when you load the url for the image directly, you should see something similar, except this time the request is successful.

The more information from there as possible, to work out the difference between the requests - might help us work out what is causing one to fail and the other not to.

One more thing, does it still fail inside an incognito window/other browsers?

[morrolinux]

@allouis I found something.

That's my network tab:

Let's have a look at two elements with two different failures:

and

Then I noticed about the chromium warning in the address bar:

It says something like "unsafe contents/scripts have been blocked"
If I do allow running te "unsafe" scripts, the site will render fine:

But then the https will be flagged as insecure

[allouis]

@morrolinux This could be caused by incorrect config for your blog, do you have the url in your config set to https://blog.morrolinux.it/?

[pascalandy]

In my case I do. It's passed as an ENV VAR for 18 months. But why would it only affect the theme Casper?

[allouis]

@pascalandy Are you seeing the same thing in your network tab? the mix of https: and http:? If not then the above won't apply.

The newer Casper theme has been updated to use v2 API, and currently the theme layer is outputting absolute urls by default when using the v2 api, which would cause the mixed content if url hasn't been configured correctly. (We're fixing that atm, and going back to relative - issue here: #10595)

However, if this isn't the cause of the issue for you (mixed content), then it is probably something else.

[morrolinux]

@allouis my url env variabile is http (not https). I tried setting it to https, but then if I visit the site I get redirected to https://127.0.0.1:2368/ why?

[allouis]

@morrolinux That is why you were seeing mixed content errors, you need to set your url config to the exact url you're going to host the site on.

See our docs here: https://docs.ghost.org/concepts/config/#url

if I visit the site I get redirected to https://127.0.0.1:2368/

Sounds like your config isn't getting picked up, and it's using the default config. I would check the env var is exported, and if that still doesn't work, look for help on the forum which is a great place to get support.

[morrolinux]

how come the url env var is not being exported if the url is https but it does if the url is http? I don't understand this

[morrolinux]

I'll ask the forum anyawy. thanks

[allouis]

@pascalandy Hey o/

Would you be able to include the information requested in #10578 (comment) so we can help find out what's wrong?

[pascalandy]

Sorry for the delay and thanks for the heads up! There you go:

Casper 2.9.3

other theme

[pascalandy]

Just updated to Version 2.17.1 with casper version 2.9.5.
It looks you guys fixed it :) Is it the case?

[allouis]

Looking at your initial screenshots, you were also having the issue where your config is set incorrectly! (The first request is http:).

We've masked the issue by using relative URLs, but the root cause is still there and may cause other issues in the future - I would recommend fixing your config.

Closing this now as issue has been masked - 👋

[pascalandy]

Will do, thank you.