Wp-calypso: Calypso Preview : Page/Post images with 'srcset' attribute breaking

[deskroid]

Steps to reproduce

This can be tested on any WordPress.com website having images with srcset attribute.

1. Open 'Calypso Preview' by clicking on the Site Title in Calypso mode.
2. Navigate to a page/post containing images with srcset attribute
3. Notice all such images are breaking while images with src attribute are displayed properly.

What I expected

All images should be displayed normally in Calypso Preview.

What happened instead

Most, and sometimes none of the post images were being loaded when Calypso Preview is opened up. Further tests showed that only those images which had the srcset attribute were breaking.

Browser / OS version

Chrome 53.0.2785.143 / Macintosh OS X 10.12.1

Screenshot / Video

Normal View : https://cloudup.com/iRZpAnGExxq
Calypso Preview : https://cloudup.com/it1lPR_AO_y

Context / Source

manual-testing #user-report

[lancewillett]

Thanks for the report and details, @deskroid. :)

[lancewillett]

CC @azaozz @seear

[azaozz]

I can't reproduce this now, or may be looking at the wrong place :)

Earlier we fixed a bug with srcset URLs not being https, perhaps that was the problem here too? If you still can reproduce, could you make a screenshot of the browser tools showing the markup for one of these broken images. Need to see what the src and srcset attributes are.

[deskroid]

Hi @azaozz. The broken images are https here. Here is a screenshot of the Inspect Element in Chrome : [http://prnt.sc/cz21d2]. Let me know if you need anything else on this.

[seear]

@azaozz I can reproduce as above. Seems that for mapped domains, the srcset urls are example.com/files instead of example.files.wordpress.com/

[jancavan]

I had a user report this today as well. All their post images appear broken in Calypso preview, but are displaying fine on their live site.

Example:

[rachelmcr]

We received another user report of this issue confirming the same behavior @seear described — the site has a mapped domain and the srcset URLs are incorrect (example.com/files) and returning 404 errors in the Calypso preview, but are ok on the front of the site. Reference: p2UL9c-31W-p2

[azaozz]

Tahnks @deskroid and @seear. This seems to be a core bug. Happens when filtering the site URL which is then used in wp_get_upload_dir() which is used in wp_calculate_image_srcset(). Basically wp_get_upload_dir()['url'] is incorrect.

Looking further.

[jerrysarcastic]

Also had a report of this issue in #2895936-t

I logged in via SU and can confirm the images 404 in the calypso preview, but are visible on the site front end. When I inspect the page, I see that the images use srcset URLs:

[eduardozulian]

Reported also on 2897176-t when checking srcset URLs. Here's another screenshot demonstrating the issue:

[folletto]

A change went in Oct 31 that might have fixed this (r144745-wpcom).
Is the bug still present?

[stale[bot]]

This issue has been marked as stale because it hasn't been updated in a while. It will be closed in a week.
If you would like it to remain open, can you please you comment below and see what you can do to get things moving with this issue?
Thanks! 🙏