AMP is not displaying images in base64 if it is inside of AMP-LIST and mustache template

349 Views Asked by At

I have an amp-state with a list of objects that is filled dynamically. These objects have a attribute "image" that can be an url or a base64 image. It is working fine in a isolated amp-img tag, both cases, but base64 image is not working inside the amp-list, the "src" attribute is (unkwown). I tried to print the value outside the "src" attribute and it is correct, also if there is an url instead of base64 it works fine.

I also tried to escape the output with {{{ }}} but I got the same.

The amp-state list has items with this structure:

{
    "url": "",
    "imageUrl": "",
    "title": "",
    "description": ""
}

The isolated amp-img that is working with url and base64:

<amp-img class="contain"
         alt="Item Image"
         src="https://via.placeholder.com/300"
         [src]="currentItem['imageUrl']"
         layout="fill">
</amp-img>

The amp-list with amp-img inside that is not work with base64:

<amp-list layout="responsive"
          height="0"
          [src]="myItems"
          items="."
          binding="no">
    <template type="amp-mustache">
        <div class="clearfix p1">
            <div class="col col-12 md-col-4 center">
                <a href="{{ url }}" target="_blank">
                    <div class="outer-list center">
                    <amp-img class="contain"
                             src="{{ imageUrl }}"
                             layout="fill"
                             alt="test"></amp-img>
                    </div>
                </a>
            </div>
            <div class="col col-12 md-col-8">
                <a href="{{ url }}" target="_blank">
                    <h2>{{ title }}</h2>
                </a>
                <p>{{ description }}</p>
            </div>
        </div>
    </template>
</amp-list>

Note: I am using different amp-state names but the content is exactly the same.

An example of base64 image working with isolated amp-img but not inside the amp-list:

image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==

I don't see any errors in console.

0

There are 0 best solutions below