AMP Adding an Image

未分类

大多数 HTML 标记都可以直接在 AMP HTML 中使用，但某些标记（例如 <img> 标记）被替换为等效标记或略微增强的自定义 AMP HTML 标记（少数存在问题的标记会被完全禁止使用，请参阅规范中的 HTML 标记）。

要演示其他标记，以下是在网页中嵌入图片所需的代码：

<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

完整代码例如：

<!doctype html>
<html amp lang="en">
<head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="https://amp.yingyanxt.com/">
    <meta name="viewport" content="width=device-width">
    <script type="application/ld+json">
        {
            "@context": "http://schema.org",
            "@type": "NewsArticle",
            "headline": "Open-source framework for publishing content",
            "datePublished": "2015-10-07T12:02:41Z",
            "image": [
                "logo.jpg"
            ]
        }
    </script>
    <style amp-boilerplate>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}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

    <style amp-custom>
        /* any custom style goes here */
        body {
            background-color: white;
        }
        amp-img {
            background-color: gray;
            border: 1px solid black;
        }
    </style>

</head>
<body>
<h1>Welcome to the mobile web</h1>
<amp-img src="./welcome.jpeg" alt="Welcome" height="400" width="800"></amp-img>
</body>
</html>

延伸阅读：如需了解我们为何要将诸如 <img> 等标记替换为 <amp-img> 以及有多少标记可用，请参阅添加图片和视频。