AMPで単純なHTMLページを作成していて、問題が発生しました。 JavaScriptを使用してimgsrcを変更したいところです。動作しないようです。amp-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";
これが動作するようには思えません。
JavaScriptはAMPではサポートされていません。 [src]属性を更新するには、amp-bindを使用します。
<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>
通常 ''
に入れアンペアスクリプト（https://cdn.ampproject.org/v0.jsとカスタム要素）はありますか？ – stealththeninjaスクリプトを使用すると、タグ/属性を使用して使用できる特定の機能を追加できます。たとえば、amp-bindのサンプルhttps://ampbyexample.com/components/amp-bindを参照してください。基本的に、頭にamp-bindを含めると（ ''） '[src]'や '[value]'にローカル変数を使う権限があります。 – adnanyousafch
URLに応じて別の画像を読み込み、HTMLでイベントが発生したときに画像を読み込まないようにしたい。私はJSをURLから分割するために使用しました：exmaple：https://test.com?=catのために、私は入力したCATを手に入れました。これを達成することができますか？ – subt