1

我有一个 amp 状态，其中包含动态填充的对象列表。这些对象有一个属性“image”，可以是 url 或 base64 图像。它在隔离的 amp-img 标记中工作正常，两种情况下，但 base64 图像在 amp-list 中不起作用，“src”属性为（unkwown）。我试图在“src”属性之外打印值，它是正确的，如果有一个 url 而不是 base64，它也可以正常工作。

我也尝试用 {{{ }}} 转义输出，但我得到了相同的结果。

amp-state 列表包含具有以下结构的项目：

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

使用 url 和 base64 的隔离 amp-img：

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

内部带有 amp-img 的 amp-list 不适用于 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>

注意：我使用了不同的 amp-state 名称，但内容完全相同。

使用隔离 amp-img 但不在 amp-list 中的 base64 图像示例：

image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==

我在控制台中看不到任何错误。

4

0 回答 0