是否使用[ src ]绑定更改镜像src？(Amp用于电子邮件)

Question

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

<!-- 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组件(type=“幻灯片”)做类似的事情，当我点击下一张/上一张幻灯片时，我希望更改电子邮件中其他位置的副本/图像。虽然我可以更改副本，但似乎不能对图像执行相同的操作。

是否不能使用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组件中。如果有一个足够令人信服的用例，允许在这些组件之外支持它，那么请随意创建一个功能请求，我们将非常乐意与您一起定义需求和实现更改。谢谢