Images cannot be displayed without Javascript under AMP

Hi there,

I believe this explains the issue here:
https://generatepress.com/forums/topic/search-bar-cant-use-in-amp-version/#post-1692837

Hi Leo,

Appreciate the help!

Not sure if that explained it, or if I just can't wrap my head around it.

I didn't think Javascript was needed to display images already in <noscript> tags. According to the AMP HTML spec the content should display if Javascript is disabled by the user.

Do you mean something in the theme is preventing this action?

Kind regards

I don't think so but I could be wrong.

How are the images added?

Any chance you can test it with a Twenty series WP theme and see if the same issue occur?

Images are added as attachements with the Classic Editor.

Okay, good idea I will test a different theme and report back.

Sounds good let me know :)

Aha I tried with twenty twenty one and twenty twenty theme and the images did not display there either. Maybe I should raise this issue with AMP plugin team because it seems to happen regardless of theme. I thought they put the noscript tags in there specifically for this situation.

Thanks for testing!

Reporting to their support team would be a good idea :)

Thanks Leo for the help.

Best regards

No problem :)

Update from AMP Team for anyone reading, this is a known issue with AMP and here is a pull request for a fix: https://github.com/ampproject/amphtml/pull/29846

Thanks for reporting back!

Sure thing Leo, actually there's a temporary fix provided by the developer here: https://wordpress.org/support/topic/images-cannot-be-displayed-without-javascript-despite-noscript-tags/

/* 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;
}

Awesome!

This will certainly help someone else :)

Really appreciate it!