AMP image is not appearing

Question

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

Answer 1

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.

Answer 2

Please use this code ::

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

Also read here