Google 包裹在锚标记中时，Amp 响应图像不显示

Question

我正在创建一个 google amp 页面，需要包含响应图像。我希望图片是可点击的，这样当它被点击时，它会使用锚标记导航到另一个 url。一切正常，直到我用锚标记包装 amp-image，此时图像将不再显示在页面上。如果我使用一些其他布局选项，例如 fixed 或 flex-item，即使带有锚标记，图像也会按预期显示。

放大器验证测试通过。

这是我提交的html：

 <a href="www.example.com">
    <amp-img layout="responsive" src="/src/photo.JPG" width="2056" height="396"/></amp-img>
 </a>

这是在页面上呈现的结果 html。

  <a href="www.example.com">
    <amp-img layout="responsive" class="-amp-element -amp-layout-responsive -amp-layout-size-defined" src="/src/photo.JPG" width="2056" height="396">
      <i-amp-sizer style="display:block; padding-top: 19.26%"></i-amp-sizer>
    </amp-img>
  </a>

通常在 i-amp-sizer 标签之后添加另一个 img 标签，即显示在页面上的标签。但是，正如您所见，当我添加锚标记时，img 标记消失了。我似乎无法弄清楚为什么会发生这种情况或如何解决它。

Answer 1

在我的 amp-custom css 中，我为锚标记设置了 display: inline-block。一旦我删除了 inline-block 样式标签，它就起作用了。

Answer 2

就我而言，head 标签下缺少以下内容。

<script async src="https://cdn.ampproject.org/v0.js"></script>

对我有用。

Answer 3

通过在锚标签上添加 display : grid; CSS 进行检查。就我而言，我通过这个得到了解决方案。

Google 包裹在锚标记中时，Amp 响应图像不显示

Google Amp responsive image doesn’t display when wrapped in an anchor tag

amp-html