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.
The problem is I put spaces inside src attribute and it got encoded like this src={{%20image%20}} when I view the source-code of page.
I removed the spaces and it works fine. Still don't know why only src attribute encode the space,