Блог

Главная - Вопросы по программированию - Не удается использовать amp-img внутри amp-mustache?

Не удается использовать amp-img внутри amp-mustache?

#amp-html

#amp-html

Вопрос:

Прежде всего, мой проект использует фреймворк Laravel.

Я использую amp-list для динамического отображения моего контента. И вот как выглядит мой шаблон

 @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

Но это то, что браузер отображает

 <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>

Все в порядке, кроме атрибута src внутри amp-img. Я могу гарантировать, что поле {{ image }} не пустое, но каким-то образом amp-mustache не может передать его в amp-img. Другие атрибуты успешно получают значение.

Комментарии:

1. Можете ли вы поделиться примером значения для amp-img src? Среда выполнения AMP добавляет класс amp-notsupported в amp-img, что может указывать на проблему с изображением, которое вы пытаетесь отобразить. Еще одна вещь, которую нужно проверить, — это возможность отображения того же amp-img с жестко запрограммированным src вне amp-списка.

2. Это один из URL-адресов изображения p.ipricegroup.com/uploaded_a6e27bdc699fb587e5cd9dbef823dd5f.jpg . Если я жестко закодирую это значение в amp-img, поместив его как внутри amp-list, так и вне amp-list, я смогу увидеть отображаемое изображение.

3. Хм, это странно. Я много работаю с AMP, и у меня не было этой конкретной проблемы, поэтому мое любопытство достигло максимума. Не могли бы вы поделиться примером JSON, который вы используете для amp-list, или настроить JSFiddle, показывающий проблему?

4. Я опубликовал исправление своей ошибки @JaredD

Ответ №1:

Вы пытались использовать escape с mustache? К сожалению, я не могу воспроизвести ваш код для проверки, поскольку я не знаком с Laravel, но в моей практике с комбинацией рулей этот трюк помог, т.е.:

<a class="no-underline db flex relative" href="{{url}}" rel="nofollow">

BRGDS, Василий

Ответ №2:

Проблема в том, что я помещаю пробелы внутри src атрибута, и он кодируется так src={{ image }} , когда я просматриваю исходный код страницы.

Я удалил пробелы, и все работает нормально. Все еще не знаю, почему только src атрибут кодирует пробел,