Why can't we add URL behind the amp image? After adding the image doesn't get render in Gmail

Question

I need to add URLs behind every images (amp-img tag) in AMP for email. I see that when I add below code to implement this, the image rendering goes off in Gmail. Is there a work around to achieve this? If I remove tag from below it works perfectly.

<a href="https://www.samsung.com/uk/tv-accessories/customisable-frame-vg-scft50-vg-scft50be-xc/" target="_blank">
        <amp-img id="c3" width="0" height="0" [width]="updateC3.width" [height]="updateC3.height"  src=
"https://res.m1.email.samsung.com/res/samsung_mid_prod1/779fbea9a74e02d9afd4340c829b5334.JPG"
                class="gfg">
            </amp-img></a>
            <a href="https://www.samsung.com/uk/tv-accessories/customisable-frame-vg-scft50-vg-scft50wt-xc/" target="_blank">
            <amp-img id="c4" width="0" height="0" [width]="updateC4.width" [height]="updateC4.height"  src=
"https://res.m1.email.samsung.com/res/samsung_mid_prod1/2cf8b6496a81bddade877985c6fad11b.JPG"
                class="gfg">
            </amp-img></a>

Answer 1

The initial width and height of the two images are 0, which means that the images will initially be invisible. You do have [width] and [height] attributes that binds the width and height to a dynamic value using amp-bind, but amp-bind doesn't evaluate bindings until the first user gesture or in special occasions such as evaluating the binding in an amp-list template when the amp-list refreshes.

If the images are not in a template of amp-list, then the image's width and height will stay at 0 until the first user gesture. In that case you do need to give them a non-zero width and height for the images to be visible.