Cannot use amp-img inside amp-mustache?

Question

First of all my project is using Laravel Framework.

I'm using amp-list to render dynamically my content. And this is what my template look like

@verbatim
<template type="amp-mustache" id="product-card-template">
    <a class="no-underline db flex relative" href="{{ url }}" rel="nofollow">
        <amp-img width="1" height="1" layout="responsive" class="center" src="{{ image }}" alt="{{ name }}">
        </amp-img>
    </a>
</template>
@endverbatim

But this is what browser render

<a target="_top" rel="nofollow" href="https://dev-boost-my.iprice.mx/v2/levtop-back-support" class="no-underline db flex relative">
    <amp-img alt="Back Support" src="" class="center i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-built i-amphtml-layout amp-notsupported" layout="responsive" height="1" width="1" i-amphtml-ignore="" i-amphtml-layout="responsive">
        <i-amphtml-sizer slot="i-amphtml-svc" style="padding-top: 100%;"></i-amphtml-sizer>
        <img decoding="async" alt="Back Support" src="" class="i-amphtml-fill-content i-amphtml-replaced-content i-amphtml-ghost">
    </amp-img>
</a>

Everything is fine except attribute src inside amp-img. I can ensure that the field {{ image }} is not empty but some how amp-mustache cannot pass it into amp-img. Other attributes are getting value successfully.

Can you share an example value for the amp-img src? The AMP runtime is adding the amp-notsupported class to the amp-img which could indicate that there is an issue with the image you are trying to display. The other thing to test is if you are able to display the same amp-img with a hardcoded src outside of the amp-list. — Jared D
This is one of the image URLs p.ipricegroup.com/uploaded_a6e27bdc699fb587e5cd9dbef823dd5f.jpg. If I hardcode this value to amp-img, both putting it inside amp-list or outside amp-list, I can see the image displayed. — Minh Trí Nguyễn
Hm, that's odd. I work with AMP a lot and haven't had this specific issue so my curiosity is peaked. Do mind sharing an example of the JSON you are using for the amp-list or setup a JSFiddle showing the issue? — Jared D

Vasily Ivanov Vasily Ivanov · Accepted Answer · 2020-11-09T06:41:53

Have you tried to use escape with mustache? Unfortunately I'm unable to reproduce your code to check since i'm not familiar with Laravel, but in my practice with handlebars combination this trick helped, i.e.:

<a class="no-underline db flex relative" href="\{{url}}" rel="nofollow">

BRGDS, Vasily

Cannot use amp-img inside amp-mustache?

2 Answers