amp-img не отображается в карусели

Я использовал карусель AMP, чтобы показать список тезисов статей.

Почему-то только тезисы, которые были видны при загрузке страницы, имеют картинки.

(Если я поворачиваю экран больше, но загружаются не все изображения.)

Что я делаю неправильно?

Не стесняйтесь просить больше информации.

Вот макет:

<amp-carousel class="articles-carousel" layout="fixed-height" height="200" type="carousel">
    <article role="button" tabindex="1" class="article-abstract" on="tap:AMP.setState({selectedArticle:1072}),AMP.scrollTo('id' = 'article_1072')">
        <footer>
            <amp-img height="128" layout="fixed" src="/server/929/rabbis/11.jpg" width="128"/>
            <div class="article-abstract-author">
                <address>
                    <a rel="author">הרב דוד חי הכהן</a>
                </address>
            </div>
        </footer>
        <header>
            <a class="article-external-link-container" href="/929/307/1072" target="_blank">
                <i class="fas fa-external-link-alt"/>
            </a>
            <h1>נקודות אור בימי אחאב(2)</h1>
        </header>
    </article>
    <article role="button" tabindex="2" class="article-abstract" on="tap:AMP.setState({selectedArticle:1108}),AMP.scrollTo('id' = 'article_1108')">
        <footer>
            <amp-img height="128" layout="fixed" src="/server/929/rabbis/24.jpg" width="128"/>
            <div class="article-abstract-author">
                <address>
                    <a rel="author">הרב חיים בן סניור</a>
                </address>
            </div>
        </footer>
        <header>
            <a class="article-external-link-container" href="/929/307/1108" target="_blank">
                <i class="fas fa-external-link-alt"/>
            </a>
            <h1>מלחמת אחאב ובן הדד</h1>
        </header>
    </article>
    <article role="button" tabindex="3" class="article-abstract" on="tap:AMP.setState({selectedArticle:1112}),AMP.scrollTo('id' = 'article_1112')">
        <footer>
            <amp-img height="128" layout="fixed" src="/server/929/rabbis/6.jpg" width="128"/>
            <div class="article-abstract-author">
                <address>
                    <a rel="author">הרב צבי שוויגר</a>
                </address>
            </div>
        </footer>
        <header>
            <a class="article-external-link-container" href="/929/307/1112" target="_blank">
                <i class="fas fa-external-link-alt"/>
            </a>
            <h1>המוותר על דברי נביא</h1>
        </header>
    </article>
    <article role="button" tabindex="4" class="article-abstract" on="tap:AMP.setState({selectedArticle:1113}),AMP.scrollTo('id' = 'article_1113')">
        <footer>
            <amp-img height="128" layout="fixed" src="/server/929/rabbis/6.jpg" width="128"/>
            <div class="article-abstract-author">
                <address>
                    <a rel="author">הרב צבי שוויגר</a>
                </address>
            </div>
        </footer>
        <header>
            <a class="article-external-link-container" href="/929/307/1113" target="_blank">
                <i class="fas fa-external-link-alt"/>
            </a>
            <h1>עונש אחאב</h1>
        </header>
    </article>
</amp-carousel>

Вы можете видеть, что появилось только три из четырех картинок:

0 ответов

С вашим кодом все в порядке, после того, как некоторые R & D обнаружили, что это ошибка в обработке отложенной загрузки в rtl.

На данный момент вы можете изменить направление для ампер-карусели и настроить дизайн в соответствии с вашими потребностями. Команда Till AMP не исправит эту ошибку.

.articles-carousel { direction:ltr; }

Если вы можете поменять карусель типа усилитель-карусель на слайды, то это также сработает.

Другие вопросы по тегам