Question

我正在创建一个Google放大器页面，需要包含一个响应式图像。我希望图像可以点击，这样当它被点击时，它会使用锚标记导航到另一个网址。一切都很完美，直到我用一个锚标签包装放大器图像，此时图像将不再显示在页面上。如果我使用其他一些布局选项，例如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中，我为EmpID设置了锚标签。删除内联块样式标记后，它就可以了。

Answer 2

在我的情况下，head标记下缺少以下内容。

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

对我有用。

Answer 3

通过在锚标记上添加display : grid; CSS进行检查。就我而言，我是通过这种方式解决的。

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

3 个答案: