我在 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";
这似乎行不通。
最佳答案
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>
关于javascript - 如何更改 amp-img src?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47059386/