如何使用 AMP-Carousel 加载（更改）图像 src？ （用于电子邮件的 AMP）

Question

我正在尝试轮播一次显示三个图像（type="carousel"），其中每个图像代表一个类别，用户可以单击轮播中的图像以加载/显示附加信息（文本和图片）在轮播下方的那个类别上。从我最初对文档的探索中，我找不到这样的例子。似乎这对于 type="carousel" 是不可能的。如果对此有任何确认，或者我在这里的假设有误，将不胜感激。

解决方法： 我确实发现如果我在 AMP-Bind 组件中使用 type="slides" 代替（轮播一次显示一张图像），我可以使用“on”事件来更改/更新电子邮件中其他地方的内容每次 prev/下一个按钮被按下。不完美，但从最初的想法出发是一种合理的替代方法。

<amp-carousel
   type="slides"
   on="slideChange:AMP.setState({ currentAdventure: event.index} )">

amp-bind 的 Amp for Email 文档页面显示了一个将 [src] 绑定到 amp-img 以更改图像源路径的示例（一个稍微复杂的示例）：

<amp-state id="myAnimals">
  <script type="application/json">
    {
      "dog": {
        "imageUrl": "/img/dog.jpg",
        "style": "greenBackground"
      }
...
    }
  </script>
</amp-state>

<amp-img width="300" height="200" src="/img/dog.jpg"
    [src]="myAnimals[currentAnimal].imageUrl">
</amp-img>

用于电子邮件游乐场的 AMP： 到目前为止，我认为很好。看来我可以更新文本和图像源路径。虽然我可以更新文本，但 Amp For Email 验证器在 amp-img 标签中标记了 [src] 的使用，因此无法更改图像。 :-(

我猜这可能是出于安全原因在之后的某个时间实施的。

解决方案？ 是否有另一种方法来更新图像源路径，或者这在任何情况下都是不允许的？ AMP-list 是一种可能的解决方案吗？如果是这样，不确定如何使用下面的代码 sn-ps 实现（Jason、Carousel 和要更新的内容块）

对于如此冗长的解释，我深表歉意，并感谢任何见解。感谢您分享您的时间和知识。

<amp-state id="myState">
  <script type="application/json">
    {
      "adventure": [
         {
          "name": "Category 1 copy...",
          "description": "Trip 1 | Trip 2 | Trip 3 | Trip 4,
          "image": "https://preview.amp.dev/static/inline-examples/images/image1.jpg"
        },
        {
          "name": "Category 2 copy...",
          "description": "Trip 5 | Trip 6 | Trip 7 | Trip 8",
          "image": "https://preview.amp.dev/static/inline-examples/images/image2.jpg"
        },
        {
          "name": "Category 3 copy...",
          "description": "Trip 9 | Trip 10 | Trip 11 | Trip 12",
          "image": "https://preview.amp.dev/static/inline-examples/images/image3.jpg"
        }
      ]
    }
  </script>
</amp-state>



<amp-carousel
    width="543"
    height="150"
    type="slides"
    on="slideChange:AMP.setState({ currentAdventure: event.index} )">

    <amp-img src="https://preview.amp.dev/static/inline-examples/images/image1.jpg" 
        width="175"
        height="150"></amp-img>
    ....

</amp-carousel>



<div class="center">
<h1>
<span [text]="myState.adventure[currentAdventure].name">Category 1 copy..."</span>
</h1>
<p class="center" [text]="myState.adventure[currentAdventure].description">Trip 1 | Trip 2 | Trip 3 | Trip 4</p>
<amp-img src="https://preview.amp.dev/static/inline-examples/images/image1.jpg" 
        width="175"
        height="150"
        [src]="myState.adventure[currentAdventure].image"></amp-img>
</div>  

Answer 1

AMP for Email 不支持绑定到 [src] 或 [href]（AMP for Email Supported Components 中提到了这一点）。

相反，您可以在这里做的只是为文档的每个幻灯片部分提供所有图像（和其他内容），然后使用[hidden] 绑定隐藏与当前幻灯片无关的图像，例如这个：

<amp-state id="currentAdventure">
  <script type="application/json">
    0
  </script>
</amp-state>

<amp-carousel
  width="543"
  height="150"
  type="slides"
  on="slideChange:AMP.setState({ currentAdventure: event.index} )">

  <amp-img src="https://preview.amp.dev/static/inline-examples/images/image1.jpg" 
    width="175"
    height="150"></amp-img>

  ....

</amp-carousel>


<div class="center">
  <div [hidden]="currentAdventure != 0">
    <h1>
      <span>Category 1 copy..."</span>
    </h1>
    <p class="center">Trip 1 | Trip 2 | Trip 3 | Trip 4</p>
    <amp-img src="https://preview.amp.dev/static/inline-examples/images/image1.jpg" width="175" height="150"></amp-img>
  </div>
  <div hidden [hidden]="currentAdventure != 1">
    <h1>
      <span>Category 2 copy...</span>
    </h1>
    <p class="center">Trip 5 | Trip 6 | Trip 7 | Trip 8</p>
    <amp-img src="https://preview.amp.dev/static/inline-examples/images/image2.jpg" width="175" height="150"></amp-img>
  </div>
  <div hidden [hidden]="currentAdventure != 2">
    <h1>
      <span>Category 3 copy...</span>
    </h1>
    <p class="center">Trip 9 | Trip 10 | Trip 11 | Trip 12</p>
    <amp-img src="https://preview.amp.dev/static/inline-examples/images/image3.jpg" width="175" height="150"></amp-img>
  </div>
</div>

这样，您只需要保持幻灯片索引状态，并用它来隐藏页面中不相关的部分。