更新1

Question

我试图在我的应用中使用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

Answer 1

我在图片中添加了width,height和layout="responsive"并修正了加载问题。

AMP不会让图片加载

更新1

1 个答案: