amp-list空状态下amp-img不渲染及相关报错问题排查

Let's break down what's happening here and how to fix it properly.

What's Causing the Issue? #

First, let's unpack the two scenarios you're seeing:

1. With empty initial array in amp-state:
   When you start with [] as the initial value for cars, amp-list does an initial render with an empty list. Later, when you set carId and amp-state fetches the actual data, the list re-renders with the new items. However, AMP's amp-img component has a quirk here: during this second render (updating from empty to populated), it doesn't trigger its internal resource resolution and tag conversion logic. That's why you see the amp-img tag in the DOM but no underlying img tag gets generated.

2. Without initial array in amp-state:
   When you remove the empty array, amp-state starts with no data at all. This means amp-list skips the initial empty render and waits until the data loads to render the list items for the first time. In this case, amp-img initializes correctly because it's part of the first render pass. The log message New renderItems_, continuing render pass... you're seeing isn't actually an error—it's just an info-level log from AMP's internal rendering process, letting you know the list is updating its items. It's harmless, but understandably confusing if you think it's a problem.

The Correct Implementation #

We can fix this while keeping the initial empty array (to avoid any unexpected behavior from an uninitialized amp-state) and making sure amp-img renders properly. Here's how:

Step 1: Fix the amp-list's Initial Height #

Setting height="0" initially can cause layout issues that interfere with component initialization. Instead, use a small default height like 1 (it will get overridden by the dynamic [height] once data loads):

<amp-list id="car-list" 
          layout="fixed-height" 
          src="cars" 
          [src]="cars" 
          height="1" 
          [height]="200 * cars.length" 
          items=".">

Step 2: Explicitly Trigger Updates on State Change #

Add the update-on attribute to amp-list to make it explicitly re-render when the cars state changes. This ensures the list (and its child amp-img components) fully reinitialize with the new data:

<amp-list id="car-list" 
          layout="fixed-height" 
          src="cars" 
          [src]="cars" 
          height="1" 
          [height]="200 * cars.length" 
          items="."
          update-on="cars">

Step 3: Add Alt Text to amp-img (Optional but Recommended) #

Adding an alt attribute helps AMP recognize amp-img as a valid media component and can improve accessibility. It's a small tweak that can prevent edge cases:

<amp-img layout="responsive" 
         width="50" 
         height="50" 
         src="{{HostUrl}}{{^HostUrl}}https://img.cdn.com/{{/HostUrl}}300x300{{ImgPath}}{{^ImgPath}}/grey.gif{{/ImgPath}}"
         alt="{{CarName}} thumbnail" />

Step 4: Add a Placeholder (Optional) #

To improve user experience, add a placeholder to show while data loads. This also helps amp-list handle the initial empty state more cleanly:

<amp-list id="car-list" 
          layout="fixed-height" 
          src="cars" 
          [src]="cars" 
          height="200" 
          [height]="200 * cars.length" 
          items="."
          update-on="cars">
    <template type="amp-mustache">
        <li>
            <h4 class="margin-bottom10">
                <a target="_blank" href="{{Url}}" class="carName">{{CarName}}</a>
            </h4>
            <div class="carThumb">
                <a class="imgholder" target="_blank" href="{{Url}}">
                    <amp-img layout="responsive" width="50" height="50" 
                             src="{{HostUrl}}{{^HostUrl}}https://img.cdn.com/{{/HostUrl}}300x300{{ImgPath}}{{^ImgPath}}/grey.gif{{/ImgPath}}"
                             alt="{{CarName}} thumbnail" />
                </a>
            </div>
        </li>
    </template>
    <div placeholder>Loading car listings...</div>
</amp-list>

Final Notes on the Console Log #

That New renderItems_ log is nothing to worry about—it's just AMP letting you know it's updating the list items after the state changed. If you want to hide it, you can filter out info-level logs in your browser's console settings.

内容的提问来源于stack exchange，提问作者ctor