Using amp-selector inside amp-carousel答案

【问题标题】：Using amp-selector inside amp-carouselUsing amp-selector inside amp-carousel
【发布时间】：2022-12-19 07:38:51
【问题描述】：

I am trying to render multiple images using amp-selector inside amp-carousel but the images are not loading. If I try to have amp-carousel inside the amp-selector tag then the images are rendering but that is not my use case.

Can someone explain the issue and suggest another way?

<!doctype html>
  <html amp4email data-css-strict>
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
    <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
    <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
    <style amp4email-boilerplate>body{visibility:hidden}</style>
    <style amp-custom>
    </style>
  </head>
  <body>
      <amp-carousel id="carousel-1" height="60" controls>
        <amp-selector layout="container" name="x1">
            <amp-img
                     alt="0" src="https://www.publicdomainpictures.net/fr/view-image.php?image=151128&picture=aurora-borealis-earth-magic"
                     width="52"
                     height="52"
                     option="0"
                     ></amp-img>
            <amp-img
                     alt="0" src="https://www.istockphoto.com/fr/photos/inde"
                     width="52"
                     height="52"
                     option="0"
                     ></amp-img>
            <amp-img
                     alt="2" src="https://pixabay.com/fr/images/search/nature/"
                     width="52"
                     height="52"
                     option="2"
                     ></amp-img>
        </amp-selector>
        <amp-selector layout="container" name="x1">
            <amp-img
                     alt="0" src="https://www.istockphoto.com/fr/photos/paris"
                     width="52"
                     height="52"
                     option="0"
                     ></amp-img>
            <amp-img
                     alt="0" src="https://www.istockphoto.com/fr/photos/inde"
                     width="52"
                     height="52"
                     option="0"
                     ></amp-img>
            <amp-img
                     alt="2" src="https://pixabay.com/fr/images/search/nature/"
                     width="52"
                     height="52"
                     option="2"
                     ></amp-img>
        </amp-selector>
      </amp-carousel>
  </body>
 </html>

【问题讨论】：

标签： amp-html

【解决方案1】：

You have couple of things done wrong. SRC attribute in AMP-IMG linked to the page, but not to the image, SRC attribute has to end with .jpg, .png, .svg etc... Second thing is that image width and height has to be same as image dimensions. Here is working example on codepen.

【讨论】：

I have given dummy values for <img> tag. My question is different.
@Dennon Then it's difference in image dimensions and width/height attributes. Did you checked my codepen?