AMP не позволяет загружать изображения

Я пытаюсь использовать AMP в своем приложении. Я мог бы получить свои изображения с помощью:

<img src="{{url('storage/images')}}/{{$post->image}}" alt="{{$post->title}}" class="img-fluid">

но поскольку я добавил AMP, они больше не будут загружаться:

<amp-img src="{{url('storage/images')}}/{{$post->image}}" alt="{{$post->title}}" class="img-fluid"></amp-img>

Есть идеи, что происходит?

ОБНОВЛЕНИЕ 1

это то, что я добавил в шапку своего сайта:

<html amp lang="{{ app()->getLocale() }}">
<!-- amp -->
    <script async src="https://cdn.ampproject.org/v0.js"></script><!-- must besecond child -->
    <link rel="canonical" href="{{url()->current()}}">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<!-- ./amp -->

вот ошибки, которые я получаю в своей консоли:

Powered by AMP ⚡ HTML – Version 1524089272632 http://mynewsite.pp/blog/rtger
viewer-impl.js:1025:11
Error: Layout not supported: container. The element did not specify a layout attribute. Check https://www.ampproject.org/docs/guides/responsive/control_layout and the respective element documentation for details.​​​
log.js:504:16
Error: Layout not supported: container. The element did not specify a layout attribute. Check https://www.ampproject.org/docs/guides/responsive/control_layout and the respective element documentation for details.​​​
log.js:504:16
Error: Layout not supported: container. The element did not specify a layout attribute. Check https://www.ampproject.org/docs/guides/responsive/control_layout and the respective element documentation for details.​​​
log.js:504:16
Error: Layout not supported: container. The element did not specify a layout attribute. Check https://www.ampproject.org/docs/guides/responsive/control_layout and the respective element documentation for details.​​​
log.js:504:16
Blocked loading mixed active content “http://mynewsite.pp/themes/admin/assets/icon/icofont/fonts/icofont.ttf?v=1.0.0-beta”[Learn More]
lounge.bundle.44672f4cc4bed783e5e2f3cb12270277.js:1:1280
Blocked loading mixed active content “http://mynewsite.pp/themes/dup/webfonts/fa-solid-900.woff2”[Learn More]
lounge.bundle.44672f4cc4bed783e5e2f3cb12270277.js:1:1280
Blocked loading mixed active content “http://mynewsite.pp/themes/dup/webfonts/fa-brands-400.woff2”[Learn More]
lounge.bundle.44672f4cc4bed783e5e2f3cb12270277.js:1:1280
Blocked loading mixed active content “http://mynewsite.pp/themes/dup/fonts/Linearicons-Free.woff2?w118d”[Learn More]
lounge.bundle.44672f4cc4bed783e5e2f3cb12270277.js:1:1280
Blocked loading mixed active content “http://mynewsite.pp/themes/dup/webfonts/fa-regular-400.woff2”[Learn More]
lounge.bundle.44672f4cc4bed783e5e2f3cb12270277.js:1:1280
This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!
rtger
Unhandled promise rejection undefined
p13n.min.js:1:41081

amp-html amp-img
person mafortis    schedule 28.04.2018    source источник
comment
Компоненты amp-img, как и все внешние ресурсы AMP, должны иметь явное size — я думаю, проблема в этом, но проверяли ли вы консоль на наличие предупреждений от AMP? См., например. ampproject.org/docs/troubleshooting/validation_errors.   -  person jonrsharpe    schedule 28.04.2018
comment
Почему ты используешь усилитель? ‹amp-img› не является тегом/элементом   -  person AA Shakil    schedule 28.04.2018
comment
@AAShakil, если вы используете en.wikipedia.org/wiki/Accelerated_Mobile_Pages   -  person jonrsharpe    schedule 28.04.2018
comment
@jonrsharpe я получаю это в консоли Powered by AMP ⚡ HTML – Version 1524089272632 http://mynewsite.pp/blog/rtger viewer-impl.js:1025:11 Error: Layout not supported: container. The element did not specify a layout attribute. Check https://www.ampproject.org/docs/guides/responsive/control_layout and the respective element documentation for details.​​​ log.js:504:16   -  person mafortis    schedule 28.04.2018
comment
@tambre я только что пометил свои изображения в качестве примера на официальном сайте, где я ошибаюсь?   -  person mafortis    schedule 28.04.2018
comment
@jonrsharpe, но ‹amp-img› не является элементом. Таким образом, браузеры будут игнорировать его.   -  person AA Shakil    schedule 28.04.2018
comment
Итак, вы проверили эту ссылку и документацию по соответствующему элементу? Пожалуйста, укажите минимально воспроизводимый пример в самом вопросе. Также @tambre говорит о тегах SO, которые вы указали в своем вопросе, которые я уже исправил - пожалуйста, дважды проверьте правильность применяемых вами тегов, прочитав их описания.   -  person jonrsharpe    schedule 28.04.2018
comment
@mafortis, не могли бы вы сообщить об ошибке или предупреждении в консоли вашего браузера !!   -  person AA Shakil    schedule 28.04.2018
comment
@AAShakil они не будут игнорировать это, они, вероятно, просто отобразят его как встроенный элемент при отсутствии дополнительной информации; произвольные имена элементов допустимы в HTML5. Но есть есть дополнительная информация, предоставляемая платформой AMP. Если вы не знакомы с этой структурой, маловероятно, что вы сможете помочь ОП. Если вам интересно узнать об этом больше, в вопросе и моих комментариях есть соответствующие ссылки.   -  person jonrsharpe    schedule 28.04.2018
comment
ребята, я обновил свой вопрос, чтобы вы могли видеть, что я сделал в целом, может быть, я где-то ошибся ..   -  person mafortis    schedule 28.04.2018
comment
@jonrsharpe обновил мой вопрос   -  person mafortis    schedule 28.04.2018
comment
@tambre обновил мой вопрос   -  person mafortis    schedule 28.04.2018
comment
Здесь вам НИКАК не помогут, если вы не покажете ВЕСЬ код. Прочтите комментарий @jonsharpe — вам нужен MVCE. Проблема может заключаться в неправильно структурированных файлах JSON; это может быть проблема CORS; это может быть дюжина других вопросов.   -  person Jay Gray    schedule 28.04.2018
comment
вы не можете внедрить JSON в HEAD - для этого нет процессора. Вы пытаетесь создать страницу из приложения на руле?   -  person Jay Gray    schedule 28.04.2018

Ответы (1)


arrow_upward
4
arrow_downward

убедитесь, что width, height определены в теге <amp-img>, иначе он не загрузится.

person mafortis    schedule 28.04.2018
comment
почему за это проголосовали? width и height необходимы, без них изображения не будут отображаться. layout является необязательным, имел ту же проблему, и добавление ширины и высоты решило ее (до того, как прийти сюда, если честно) проголосовал за - person Blue Bot; 12.06.2019
comment
@BlueBot, во-первых, спасибо за голосование, во-вторых: некоторые люди здесь просто голосуют за/против, чтобы заработать значки, вот и все (LOL). - person mafortis; 12.06.2019