AMP 图像未出现

人气:716 发布:2022-10-16 标签: html css amp-html

问题描述

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

I can't get this amp-img to show up. It works as an image, and when I click the src-link it loads on a separate page correctly. Changing it to amp-img makes it disappear. I set background-color: red on the amp-img and the box appears correctly, but it's an empty red box.

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(可能有很多无关的东西需要修剪,但在它起作用之前不知道什么是重要的):

CSS (probably a lot of extraneous stuff that needs to be trimmed but don't know what's important until it works):

.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;
}

推荐答案

我省略了 <script async src="https://cdn.ampproject.org/v0.js"></script> 如文档.包括修复它.

I had left out the head tag of <script async src="https://cdn.ampproject.org/v0.js"></script> as listed in the documentation. Including that fixed it.

232