Images cannot be displayed without Javascript despite noscript tags

Unminified:

<amp-img
    class="wp-image-1209 size-full aligncenter amp-wp-enforced-sizes i-amphtml-layout-intrinsic i-amphtml-layout-size-defined i-amphtml-element i-amphtml-built i-amphtml-layout"
    title="Example"
    src="https://www.example.com/wp-content/uploads/2020/10/photo-1.jpg"
    alt=""
    width="150"
    height="150"
    srcset="https://www.example.com/wp-content/uploads/2020/10/photo-1.jpg 150w, https://www.example.com/wp-content/uploads/2020/10/photo-1-100x100.jpg 100w"
    sizes="(max-width: 150px) 100vw, 150px"
    layout="intrinsic"
    disable-inline-width=""
    i-amphtml-layout="intrinsic"
    style="--loader-delay-offset: 132ms !important;"
>
    <i-amphtml-sizer class="i-amphtml-sizer"><img alt="" aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2Z....EXAMPLE=" /></i-amphtml-sizer>
    <noscript>
        <img
            class="wp-image-1209 size-full aligncenter"
            title=""
            src="https://www.example.com/wp-content/uploads/2020/10/photo-1.jpg"
            alt=""
            width="150"
            height="150"
            srcset="https://www.example.com/wp-content/uploads/2020/10/photo-1.jpg 150w, https://www.example.com/wp-content/uploads/2020/10/photo-1-100x100.jpg 100w"
            sizes="(max-width: 150px) 100vw, 150px"
        />
    </noscript>
    <img
        decoding="async"
        alt=""
        title=""
        sizes="(max-width: 150px) 100vw, 150px"
        srcset="https://www.example.com/wp-content/uploads/2020/10/photo-1.jpg 150w, https://www.example.com/wp-content/uploads/2020/10/photo-1-100x100.jpg 100w"
        src="https://www.example.com/wp-content/uploads/2020/10/photo-1.jpg"
        class="i-amphtml-fill-content i-amphtml-replaced-content"
    />
</amp-img>

Yes, this is a known issue. I’ve opened a PR to fix the issue with AMP core but it hasn’t yet been merged: https://github.com/ampproject/amphtml/pull/29846

Oh wow, I will certainly be following! Appreciate the work, best of luck!

And actually, you can work around this issue yourself by adding this CSS to the Additional CSS in the Customizer or to whatever CSS you add specifically on your AMP pages:

/* In previous rule and in this one, make sure noscript fallbacks get fill layout as if they are placeholders */
body noscript > * {
  position: absolute !important;
	
  /* Override width/height attributes defined on HTML elements in noscript. */
  width: 100%;
  height: 100%;

  /* Supersede sibling [placeholder]/[fallback] z-index:1 */
  z-index: 2;
}

body noscript > * {
  display: block;
  overflow: hidden !important;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* This rule only matters when JS is disabled since otherwise the noscript element is not parsed. */
body noscript {
  display: block !important;
}

• This reply was modified 4 years ago by Weston Ruter.

Hi Weston,

Thank you very much for your CSS snippet. It fixed the issue. It does render the images now without Javascript enabled. For my theme (GeneratePress) I had to remove this part and all looks normally:

 /* Override width/height attributes defined on HTML elements in noscript. */
  width: 100%;
  height: 100%;

The pull request is gaining traction, so it should be merged soon.

Why were you the width/height needing to be removed? Can you share screenshots what you see?

Hi Weston,

I need to remove the width/height adjustment because it appears to stretch images to 100% of the content area. I have rendered my pages in Firefox w/o Javascript and screenshot the results here: https://imgur.com/JFyXy1R

• This reply was modified 4 years ago by benanair.
• This reply was modified 4 years ago by benanair.

It looks like this issue could rather be solved by adding object-fit:contain to the noscript > img. Can you try that instead?

Also, why is the parent amp-img not the right dimensions for the noscript > img to fit?

And do you have object-fit=contain added to the amp-img? It could be an issue where that style is not getting inherited by the noscript > img child.

Hi Weston,

Appreciate the help. I wasn’t sure how exactly to add that object-fit:contain to the CSS, so I tried both:

body noscript > img {
	object-fit:contain;
}

and

body noscript > * {
  display: block;
  overflow: hidden !important;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
	object-fit:contain;
}

However, I was not able to get the desired effect.

I have uploaded a screen capture video here: https://imgur.com/UrWkwKj to perhaps show things better. Images were added using the Classic Editor with defined width/height attributes.

It looks like the issue is this CSS rule you have:

.size-medium {
    max-width: 100%;
    height: auto;
}

This size-medium class name is on the noscript > img you have. So try adding !important to the width and height:

body noscript > * {
  display: block;
  overflow: hidden !important;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

Hi Weston,

Thanks again for the help! That worked, I added the new CSS and everything looks good now viewing without Javascript. Much appreciated.

Kind regards,
Jared

We should actually consider preventing the class attribute from being copied from the amp-img to the amp-img > noscript > img. I believe this would have resolved the issue as well.

I’ve filed this as https://github.com/ampproject/amp-wp/issues/6028

Hi Weston,

Appreciate your work on this. Current the only CSS snippet I’m using is this last one you provided, which does the trick on my site:

body noscript > * {
  display: block;
  overflow: hidden !important;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}