Support » Plugin: AMP » Some Images Not Loading Version 1.0

  • Resolved Udegbunam Chukwudi

    (@strictlyonlinebiz)


    This is just a notice that after the update to the latest version 1.0.0, some images stopped loading on my amp pages. I had to rollback to 0.7.2 to get them loading again.

    You guys might want to look into that.

    Images would not load and would be showing something like the below mentioned when you right click to open image in new tab

    data:image/svg+xml;charset=utf-8,<svg height=”553px” width=”720px” xmlns=”http://www.w3.org/2000/svg&#8221; version=”1.1″/>

Viewing 15 replies - 1 through 15 (of 25 total)
  • Plugin Contributor Ryan Kienstra

    (@ryankienstra)

    Hi @strictlyonlinebiz,
    Thanks a lot for letting me know.

    Could you please share a link to a page that had this issue, and point out an image that didn’t display? I’d like to look at this and fix it if possible.

    Thanks!

    For example all images in this post refused to load https://www.patchworkoftips.com/send-email-mamp-localhost/3902/amp/ and when I checked the source code, the image codes had class=”amp-wp-enforced-sizes amp-wp-a2daeb3″ in them.

    You’re welcome sir

    Plugin Author Weston Ruter

    (@westonruter)

    @strictlyonlinebiz I believe this is a problem with Jetpack. The detection for serving the AMP response is broken in Jetpack and there is a PR open to fix here: https://github.com/Automattic/jetpack/pull/10945

    Because Jetpack is not correctly detecting that AMP is being served, it is going ahead and serving lazy-loaded images, and so this is they are broken because the Jetpack JS code to load the images is not included in the page. AMP has lazy-loading of images built-in as a feature, so that is why it needs to be disabled in Jetpack by default.

    In the mean time, an alternative you can try this workaround with 1.0: https://github.com/ampproject/amp-wp/issues/1722#issuecomment-445885819

    Also reported at https://wordpress.org/support/topic/v1-0-has-broken-jetpack-stats-tracking/

    In any case, please share the source code of the page when upgraded to 1.0 and we can confirm.

    @westonruter Thanks for the feedback sir. I think I’ll just wait for jetpack to fix the issue instead of having to edit my functions.php now and after jetpack releases a plugin update fix. I’m doing just fine with version 0.7.2

    Plugin Author Weston Ruter

    (@westonruter)

    OK, we should have 1.0.1 released in the next day or so.

    Plugin Contributor Ryan Kienstra

    (@ryankienstra)

    As @westonruter mentioned, 1.0.1 is now released and available for download.

    Plugin Author Weston Ruter

    (@westonruter)

    Oh, and v1.0.1 won’t fix the problem since the issue is with Jetpack.

    Jetpack 6.9 just came out and I thought it would fix this issue so I updated the plugin and AMP as well. Unfortunately the issue still persists. I had to keep the latest Jetpack update but rollback AMP to 0.7.2

    Plugin Author Weston Ruter

    (@westonruter)

    @strictlyonlinebiz on the non-AMP version of a post https://www.patchworkoftips.com/send-email-mamp-localhost/3902/ I can see:

    <img title="MAMP for MAC Panel Setup" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="MAMP for MAC Panel Setup" src="https://i2.wp.com/www.patchworkoftips.com/blackbee/wp-content/uploads/2014/07/Screen-Shot-2014-07-20-at-9.39.22-PM.png?resize=720%2C553&ssl=1" width="720" height="553" data-recalc-dims="1" data-lazy-src="https://i2.wp.com/www.patchworkoftips.com/blackbee/wp-content/uploads/2014/07/Screen-Shot-2014-07-20-at-9.39.22-PM.png?resize=720%2C553&is-pending-load=1#038;ssl=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class=" jetpack-lazy-image">
    <noscript>
        <img title="MAMP for MAC Panel Setup" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="MAMP for MAC Panel Setup" src="https://i2.wp.com/www.patchworkoftips.com/blackbee/wp-content/uploads/2014/07/Screen-Shot-2014-07-20-at-9.39.22-PM.png?resize=720%2C553&ssl=1" width="720" height="553" data-recalc-dims="1" />
    </noscript>

    So with v1.0.1 of the AMP plugin active, you are seeing this entire markup served with an invalid src in the <amp-img> that is generated? What happens if you turn off “Lazy Loading for images” in Jetpack settings?

    Do you have a staging environment where this issue can be debugged without affecting your live environment?

    • This reply was modified 1 year, 7 months ago by Weston Ruter.
    Plugin Author Weston Ruter

    (@westonruter)

    @strictlyonlinebiz Actually, I’m not seeing image/svg+xml;charset=utf-8 even in the Jetpack plugin at all. It seems this may be coming from another plugin. Can you do a search of your plugins for image/svg+xml to see which is causing this to be added to the page?

    With the latest versions of Jetpack and AMP plugins installed and lazy loading turned off this is what I’m seeing:

    <p><amp-img title="Screenshot_2015-04-14-08-47-21" alt="Screenshot_2015-04-14-08-47-21" src="https://i2.wp.com/www.patchworkoftips.com/blackbee/wp-content/uploads/2015/04/Screenshot_20150414084721.png?resize=360%2C491&ssl=1" width="360" height="491" data-recalc-dims="1" class="amp-wp-enforced-sizes amp-wp-862f1b3" layout="intrinsic"></amp-img></p>

    This image in particular didn’t load at all, just like many images in other pages.

    With the latest version of Jetpack and version 0.7.2 AMP plugin and lazy loading turned on, this is what things look like:

    <p><amp-img alt="Screenshot_2015-04-14-08-47-21" src="https://i2.wp.com/www.patchworkoftips.com/blackbee/wp-content/uploads/2015/04/Screenshot_20150414084721.png?resize=360%2C491&ssl=1" width="360" height="491" class="amp-wp-enforced-sizes" layout="intrinsic"></amp-img></p>

    Images are loading just fine in this scenario

    How do I run a search for image/svg+xml in my plugins?

    Plugin Author Weston Ruter

    (@westonruter)

    I don’t see any substantive difference between these two amp-img elements.

    In fact, if I paste them into the AMP Playground they both load just fine:

    <p><amp-img title="Screenshot_2015-04-14-08-47-21" alt="Screenshot_2015-04-14-08-47-21" src="https://i2.wp.com/www.patchworkoftips.com/blackbee/wp-content/uploads/2015/04/Screenshot_20150414084721.png?resize=360%2C491&ssl=1" width="360" height="491" data-recalc-dims="1" class="amp-wp-enforced-sizes amp-wp-862f1b3" layout="intrinsic"></amp-img></p>
    
    <p><amp-img alt="Screenshot_2015-04-14-08-47-21" src="https://i2.wp.com/www.patchworkoftips.com/blackbee/wp-content/uploads/2015/04/Screenshot_20150414084721.png?resize=360%2C491&ssl=1" width="360" height="491" class="amp-wp-enforced-sizes" layout="intrinsic"></amp-img></p>

    Paste those into https://ampbyexample.com/playground/

    I don’t see image/svg+xml here, so that may not be relevant.

    Can you leave AMP v1.0.1 active so that I can the issue myself?

    @westonruter I’ve updated it to v1.0.1. You can check now

    Plugin Author Weston Ruter

    (@westonruter)

Viewing 15 replies - 1 through 15 (of 25 total)
  • The topic ‘Some Images Not Loading Version 1.0’ is closed to new replies.