使用[src]绑定更改图像src吗？ （用于电子邮件的放大器）

Question

在“用于电子邮件的amp-bind Amp的文档”页面上，显示了一个将[src]绑定到amp-img以更改图像源路径的示例（稍微复杂一些的示例：

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

<!-- Or change an image's src with the [src] binding. -->
<amp-img width="300" height="200" src="/img/dog.jpg"
    [src]="myAnimals[currentAnimal].imageUrl">
</amp-img>

但是，当我在Playground中验证时，我得到：属性“ [src]”可能不会出现在标签“ AMP-IMG（AMP4EMAIL）”中。

我正在尝试使用Carousel组件（类型为“幻灯片”）做类似的事情，当我单击下一张/上一张幻灯片时，我希望更改电子邮件中其他位置的复制/图像。虽然可以更改副本，但似乎无法对图像进行相同的更改。

是否无法使用用于电子邮件的Amp的amp-bind组件更改图像源路径？有解决方法吗？

Answer 1

Vadim，您可以通过amp-mustache使用模板来修改amp-img的src属性。例如

<amp-list ...>
...
 <template type="amp-mustache">
    <div class="products">
        <amp-img width="150"
               height="100"
               alt="{{name}}"
               src="{{img}}"></amp-img>
        <p class="name">{{name}}</p>
        <p class="star">{{{stars}}}</p>
        <p class="price">{{price}}</p>
    </div>
</template>

...

我不记得为什么安全性似乎很可能会解决为什么无法在src上进行绑定的设计决策。因此，很不幸，如果您发现模板仅在嵌套在amp-form或amp-list组件中时适用。如果有足够引人注目的用例可以在这些组件之外提供对它的支持，请随时创建功能请求，我们非常乐于与您一起定义需求和实施更改。谢谢

Answer 2

谢谢@AaronL。我是AMP的新手，所以我不熟悉。以下是我的Jason，Carousel和内容（要更新）摘要。我尝试根据您的样本相应地更新内容片段，但由于内容部分最终为空，因此我认为我做的不正确。您介意根据您的示例更新以下内容吗？

  <amp-state id="myState">
  <script type="application/json">
    {
      "adventure": [
         {
          "name": "Go hiking with one of the following trips.",
          "description": "Trip 1 | Trip 2 | Trip 3 | Trip 4,
          "image": "https://preview.amp.dev/static/inline-examples/images/image1.jpg"
        },
        {
          "name": "Go boating with one of the following trips.",
          "description": "Trip 1 | Trip 2 | Trip 3 | Trip 4",
          "image": "https://preview.amp.dev/static/inline-examples/images/image2.jpg"
        },
        {
          "name": "Get bicycling with one of the following trips.",
          "description": "Trip 1 | Trip 2 | Trip 3 | Trip 4",
          "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">Get hiking with one of our trips.</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>  

非常感谢。