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