amp-img fails to load when inside amp-list template that's inside an amp-story-page-attachment.

[brianpetro]

What's the issue?

amp-img fails to load when inside amp-list template that's inside an amp-story-page-attachment.

Inspecting the developer console reveals that the 'src' is never retrieved.

Also affects amp-gfycat which loads amp-img and amp-video. Seems also likely to be affecting amp-video.

How do we reproduce the issue?

Tips on Rendering Bugs

The mustache template is located in amp-story-grid-layer because it cannot be a descendant of amp-story-page-attachment. This pattern works for other amp-list elements like rendering buttons.

What browsers are affected?

Chrome on windows. Chrome app on Pixel 4a 5g.

Which AMP version is affected?

amp-story

[brianpetro]

In addition to amp-image, it seems that this also affects amp-fit-text.

[fernandofmarte]

If it helps, I'm running into the same issue. The markup is the following:

        <amp-story-page id="page5" 
          auto-advance-after="30s">
          <amp-story-grid-layer template="fill">
            <amp-video 
              width="720" 
              height="1200" 
              src="assets/movies/netflix-and-chill.mp4" 
              poster="assets/movies/netflix-and-chill.jpg" 
              layout="responsive" 
              loop
              autoplay
            >
              <source src="assets/movies/netflix-and-chill.mp4" type="video/mp4" />
              <div fallback>
                <p>This browser does not support the video element.</p>
              </div>
            </amp-video>
            <template 
              type="amp-mustache"
              id="movie-info-template">
              <section>
                <div>
                  <strong>#{{ranking}}</strong>
                  <amp-img 
                    src={{image_url}} 
                    width="60" 
                    height="100" 
                    alt="{{title}}"
                    layout="flex-item">
                  </amp-img>
                  <p class="movie-info"><span>{{title}}</span> - {{description}}</p>
                </div>
              </section>
            </template>
          </amp-story-grid-layer>
          
          <amp-story-page-attachment 
            layout="nodisplay"
            cta-text="Check out Netflix's Top 10">
            <amp-list
              width="auto"
              height="1200"
              layout="fixed-height"
              src="https://localhost:8443/top10"
              template="movie-info-template"
            ></amp-list>
          </amp-story-page-attachment>
        </amp-story-page>

Inspecting the element, it looks like the image doesn't finish loading and it's showing a loading div:

<amp-img layout="flex-item" alt="You" height="100" width="60" src="http://localhost:8000/assets/movies/top10/you.jpg" i-amphtml-ignore="" class="i-amphtml-element i-amphtml-layout-flex-item i-amphtml-layout-size-defined i-amphtml-built" i-amphtml-layout="flex-item" style="width: 60px; height: 100px; --loader-delay-offset:1ms !important;">
                  <div slot="i-amphtml-svc" class="i-amphtml-svc i-amphtml-loading-container i-amphtml-fill-content"><div class="i-amphtml-loader-background amp-active"><div class="i-amphtml-new-loader i-amphtml-new-loader-size-small"><div class="i-amphtml-new-loader-shim"></div><div class="i-amphtml-new-loader-logo"><svg class="i-amphtml-new-loader-logo-default" viewBox="0 0 72 72"><circle cx="36" cy="36" r="12"></circle></svg></div><div class="i-amphtml-new-loader-spinner-wrapper"><svg class="i-amphtml-new-loader-spinner" viewBox="0 0 48 48"><path class="i-amphtml-new-loader-spinner-path" fill="none" d="M24 2a22 22 0 10.01 0m33.27 5.65a22 22 0 102.74-2.1m46.13 1.35a22 22 0 105.96-3.44m42.96 2.74a22 22 0 109.49-3.93m39.46 3.28a22 22 0 1013.13-3.52M253 4.95a22 22 0 1016.69-2.2m32.32 1.65a22 22 0 1019.98 0m29.06-.5a22 22 0 1022.79 3m26.28-3.44a22 22 0 1024.98 6.69m24.1-7.07a22 22 0 1026.4 10.94m22.71-11.27a22 22 0 1026.94 15.56m22.18-15.83a22 22 0 1026.54 20.37m22.59-20.58a22 22 0 1025.17 25.17M645.7 2.12a22 22 0 1022.84 29.76m26.31-29.85a22 22 0 1019.6 33.95M744 2a22 22 0 1015.56 37.56m33.59-37.53a22 22 0 1010.83 40.42M842.3 2.12a22 22 0 105.58 42.42m43.56-42.27a22 22 0 100 43.46m49.13-43.25a22 22 0 10-5.73 43.49m54.85-43.22a22 22 0 10-11.39 42.5m60.5-42.17a22 22 0 00-16.79 40.53m65.87-40.15a22 22 0 00-21.73 37.64m70.8-37.2a22 22 0 00-26.05 33.94m75.09-33.44a22 22 0 00-29.59 29.59M1235 4.95a22 22 0 00-32.25 24.75m81.23-24.15a22 22 0 00-33.95 19.6m82.9-18.95a22 22 0 00-34.66 14.36m83.58-13.66a22 22 0 00-34.38 9.21m83.25-8.46a22 22 0 00-33.17 4.37m82.01-3.58a22 22 0 00-31.11 0m81.35 2.63a22 22 0 00-32.52-3.42m82.32 6.36a22 22 0 00-33.45-7.11m82.77 10.3a22 22 0 00-33.85-11m82.66 14.36a22 22 0 00-33.71-15.01M1726 24a22 22 0 00-33-19.05m80.73 22.49a22 22 0 00-31.72-23.04m78.91 26.4a22 22 0 00-29.87-26.9m76.55 30.09a22 22 0 00-27.49-30.53m73.69 33.47a22 22 0 00-24.6-33.85m70.36 36.48a22 22 0 00-21.25-36.81m66.62 39.05a22 22 0 00-17.51-39.32m62.57 41.12a22 22 0 00-13.43-41.33m58.24 42.65a22 22 0 00-9.1-42.8m53.74 43.61a22 22 0 00-4.59-43.7M2184 46a22 22 0 100-44m44.56 43.73a22 22 0 104.59-43.7m40.05 42.89a22 22 0 109.1-42.8m35.71 41.48a22 22 0 1013.43-41.33m31.63 39.53a22 22 0 1017.51-39.32m27.86 37.08a22 22 0 1021.25-36.81m24.51 34.18a22 22 0 1024.6-33.85m21.6 30.91a22 22 0 1027.49-30.53m19.19 27.34a22 22 0 1029.87-26.9m17.32 23.54a22 22 0 1031.72-23.04M2642 24a22 22 0 1033-19.05m15.27 15.61a22 22 0 1033.71-15.01m15.1 11.65a22 22 0 1033.85-11m15.47 7.81a22 22 0 1033.45-7.11m16.35 4.17a22 22 0 1032.52-3.42m17.72.79a22 22 0 1031.11 0m17.73-.79a22 22 0 1032.52 3.42m16.35-4.17a22 22 0 1033.45 7.11m15.47-7.81a22 22 0 1033.85 11m15.1-11.65a22 22 0 1033.71 15.01M3133 4.95A22 22 0 103166 24m16.01-19.6a22 22 0 1031.72 23.04m17.32-23.54a22 22 0 1029.87 26.9m19.2-27.34a22 22 0 1027.49 30.53m21.59-30.91a22 22 0 1024.6 33.85m24.51-34.18a22 22 0 1021.25 36.81m27.87-37.08a22 22 0 1017.51 39.32m31.62-39.53a22 22 0 1013.43 41.33m35.71-41.48a22 22 0 109.1 42.8m40.05-42.89a22 22 0 104.59 43.7M3624 2a22 22 0 100 44m49.15-43.97a22 22 0 00-4.59 43.7m53.74-43.61a22 22 0 00-9.1 42.8m58.24-42.65a22 22 0 00-13.43 41.33m62.56-41.12a22 22 0 00-17.51 39.32m66.63-39.05a22 22 0 00-21.25 36.81m70.36-36.48a22 22 0 00-24.6 33.85m73.68-33.47a22 22 0 00-27.49 30.53m76.56-30.09a22 22 0 00-29.87 26.9m78.91-26.4a22 22 0 00-31.72 23.04M4115 4.95A22 22 0 004082 24m81.98-18.45a22 22 0 00-33.71 15.01m82.66-14.36a22 22 0 00-33.85 11m82.77-10.3a22 22 0 00-33.45 7.11m82.32-6.36a22 22 0 00-32.52 3.42"></path></svg></div></div></div></div></amp-img>

The image does load properly and I see it in the network tab. Also, if I add in an amp-img directly into the story-page-attachment, it works as expected.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.