Amp html 如何使用AMP转盘加载（更改）图像src？（适用于电子邮件）

我试图一次旋转显示三个图像（type=“carousel”），其中每个图像表示一个类别，用户可以单击旋转中的图像，以加载/显示旋转下方该类别的其他信息（文本和图像）。从我最初对文档的探索中，我找不到这方面的例子。对于type=“carousel”，这似乎是不可能的。如果您能证实这一点，或者我的假设有误，我将不胜感激

解决方法： 我确实发现，如果我使用type=“slides”（转盘一次显示一张图像）和AMP Bind组件，我可以在每次按下prev/next按钮时使用“on”事件更改/更新电子邮件中其他位置的内容。不是完美的，而是源于原始想法的合理替代方法

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

Amp bind的Amp for Email documentation页面显示了将[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>

{
“狗”：{
“imageUrl”：“/img/dog.jpg”，
“风格”：“绿色背景”
}
...
}

适用于电子邮件的AMP： 到目前为止还不错，我想。看来我可以同时更新文本和图像源路径。虽然我可以更新文本，但Amp For Email validator在Amp img标记中标记了[src]的使用，因此无法更改图像：-(

我猜这可能是出于安全原因，在以后的某个时候实施的

解决方案？ 是否有其他方法更新图像源路径，或者这在任何情况下都是不允许的？AMP list是一种可能的解决方案吗？如果是，不确定如何使用下面的代码片段（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>  

{
“冒险”：[
{
“名称”：“第1类副本…”，
“描述”：“行程1 |行程2 |行程3 |行程4，
“图像”：https://preview.amp.dev/static/inline-examples/images/image1.jpg"
},
{
“名称”：“第2类副本…”，
“描述”：“第5次行程|第6次行程|第7次行程|第8次行程”，
“图像”：https://preview.amp.dev/static/inline-examples/images/image2.jpg"
},
{
“名称”：“第3类副本…”，
“描述”：“行程9 |行程10 |行程11 |行程12”，
“图像”：https://preview.amp.dev/static/inline-examples/images/image3.jpg"
}
]
}
....
第1类副本……”
Trip 1 | Trip 2 | Trip 3 | Trip 4

AMP for Email不支持绑定到

[src]

或

[href]

（这在中提到）

相反，您可以在这里做的只是将文档中每个幻灯片部分的所有图像（和其他内容）都保存下来，然后使用

[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>

0
....
第1类副本……”
行程1 |行程2 |行程3 |行程4

第二类副本。。。
行程5 |行程6 |行程7 |行程8
第三类副本。。。
行程9 |行程10 |行程11 |行程12

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