如何更改amp-img src？

Question

我在AMP中構建一個簡單的HTML頁面，遇到一個問題。 我想通過JavaScript更改img src ，但似乎不起作用。

HTML：

<amp-img id="logo-cat" src="http/images.." alt="logo-category"

JavaScript：

var logoimg = document.getElementById("logo-cat"); 


    logoimg.src = "https://cdn.vox-cdn.com/uploads/chorus_asset/file/8597673/ph_1_color_black_moon_copy_1000x1000.png";

這似乎不起作用。

Answer 1

AMP不支持Javascript。 使用amp-bind更新[src]屬性。

 <amp-state id="images"> <script type="application/json"> { "imageUrl_1": "http://via.placeholder.com/350x350", "imageUrl_2": "http://via.placeholder.com/250x250", "imageUrl_3": "http://via.placeholder.com/150x150" } </script> </amp-state> <script async src="https://cdn.ampproject.org/v0.js"></script> <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script> <button on="tap:AMP.setState({imageUrl: images.imageUrl_1})">Image 1</button> <button on="tap:AMP.setState({imageUrl: images.imageUrl_2})">Image 2</button> <button on="tap:AMP.setState({imageUrl: images.imageUrl_3})">Image 3</button> <amp-img id="amp-img" src="http://via.placeholder.com/350x350" layout="responsive" width="350" height="350" [src]="imageUrl ? imageUrl : images.imageUrl_1"> </amp-img> 

Answer 2

AMP HTML規范 ：

AMP-HTML中不允許使用作者編寫的Javascript。

此SO帖子的其他參考。