AMP image is not appearing

10,947

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.

Share:
10,947
thumbtackthief
Author by

thumbtackthief

Python/Django developer learning iOS/Swift in my (limited) spare time. Passionate about learning and helping others to do the same

Updated on August 19, 2022

Comments

  • thumbtackthief
    thumbtackthief over 1 year

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