Question

我正在尝试一次在轮播中显示三幅图像（类型=“ carousel”），其中每幅图像代表一个类别，用户可以在该视图中单击该轮播中的图像以加载/显示其他信息（文本和图片）位于轮播下的该类别。从对文档的最初探索中，我无法找到一个示例。看来这对于type =“ carousel”是不可能的。如果您对此有任何确认，或者我对此处的假设有误，将不胜感激。

解决方法：我确实发现是否对AMP-Bind组件使用type =“ slides”（轮播一次显示一张图像），每次prev /时，都可以使用“ on”事件来更改/更新电子邮件中其他位置的内容按下下一个按钮。这不是完美的方法，但是可以替代最初的想法。

<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-img标记中标记了[src]的使用，因此无法更改图像。：-（

我猜想这可能是出于安全原因，后来才实现。

解决方案？还有另一种更新图像源路径的方法吗？或者在任何情况下都不允许这样做吗？ AMP列表是否可能解决？如果是这样，则不确定如何使用下面的代码段（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不支持绑定到[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>

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

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

1 个答案:

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

1 个答案:

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