谷歌 AMP amp-img

AMP HTML 页面不支持标准img 标签， 我们使用amp-img组件在 AMP HTML 页面中插入图像。 amp-img 组件不需要将脚本嵌入到标头中，因为它来自 amp 运行时。

需要脚本： amp-img 是一个内置元素，因此会通过 AMP 运行时自动导入。

属性：

• src：指定要嵌入的图像的 URL 或路径。
• 大小：定义媒体查询的大小，这只能在属性 rel=”icon” 时使用。
• 属性：这是一个描述图像属性的字符串。
• height：定义图像的高度。
• 宽度：定义图像的宽度。

例子：

HTML

  

    
    Google AMP amp-img
>
    
    
      
    
  
    
  
    
        body {
            -webkit-animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both;
              
            -moz-animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both;
              
            -ms-animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both;
              
            animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both
        }
  
        @-webkit-keyframes -amp-start {
            from {
                visibility: hidden
            }
  
            to {
                visibility: visible
            }
        }
  
        @-moz-keyframes -amp-start {
            from {
                visibility: hidden
            }
  
            to {
                visibility: visible
            }
        }
  
        @-ms-keyframes -amp-start {
            from {
                visibility: hidden
            }
  
            to {
                visibility: visible
            }
        }
  
        @-o-keyframes -amp-start {
            from {
                visibility: hidden
            }
  
            to {
                visibility: visible
            }
        }
  
        @keyframes -amp-start {
            from {
                visibility: hidden
            }
  
            to {
                visibility: visible
            }
        }
    
    
        
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        
    
    
        amp-img>div[fallback] {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f2f2f2;
            border: solid 1px #ccc;
        }
    

  

  
    
    
    
  
    
    
        offline
    
  
    
        
            
        
    

  

输出：