Question

我无法让amp-img显示出来。它作为一个图像工作，当我点击src-link时，它正确地加载到一个单独的页面上。将其更改为amp-img会使其消失。我在background-color: red上设置amp-img并且框正确显示，但它是一个空的红色框。

HTML：

<li>
    <a href="/">
    <amp-img src="https://d12v9rtnomnebu.cloudfront.net/oursite/logo_white.png" alt="site logo" width="264" height="96"/>
    </a>
</li>

CSS（可能需要修剪很多无关紧要的东西，但在它起作用之前不知道什么是重要的）：

.amp .site-menu li {
    height: 32px;
    line-height: 32px;
}

.amp .site-menu li:first-child {
    float: left;
    min-width: 50px;
    max-width: 180px;
    width: 100%;
    display: block;
}

.amp .site-menu a {
    min-width: 50px;
    max-width: 200px;
    width: 100%;
    display: block;
}

.amp .site-menu amp-img {
    height: 32px;
    min-width: 50px;
    max-width: 200px;
    width: 100%;
    float: left;
    display: block;
    background-color: red;
}

Answer 1

我遗漏了documentation中列出的head <script async src="https://cdn.ampproject.org/v0.js"></script>标记。包括修复它。

Answer 2

请使用此代码::

<amp-img src="https://d12v9rtnomnebu.cloudfront.net/oursite/logo_white.png" alt="site logo" width="264" height="96"></amp-img>

AMP图像未显示

2 个答案: