AMP HTML页面不支持标准的img标签,我们使用amp-img组件在AMP HTML页面中插入图像。 amp-img组件在运放运行时不需要将脚本嵌入到标头中。
所需脚本:amp-img是内置元素,因此会通过AMP运行时自动导入。
HTML
<script async src=
"https://cdn.ampproject.org/v0.js">
</script>
属性:
- src:指定要嵌入的图像的URL或路径。
- sizes:定义媒体查询的大小,仅当属性rel =” icon”时才可以使用。
- attribution:这是一个描述图像属性的字符串。
- height:定义图像的高度。
- width:定义图像的宽度。
例:
HTML
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Google AMP amp-img</title>
>
<script async src=
"https://cdn.ampproject.org/v0.js">
</script>
<link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-img/index.html">
<meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
<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>
amp-img>div[fallback] {
display:flex;
align-items:center;
justify-content:center;
background:#f2f2f2;
border:solid 1px #ccc;
}
</style>
</head>
<body>
<!-- A simpler esponsive image-->
<amp-img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png"
width="1080" height="610"
layout="responsive" alt="AMP">
</amp-img>
<!--shows a `fallback` in case the
image couldn't be loaded. -->
<amp-img src="does-not-exist.jpg"
width="300" height="100"
layout="responsive"
alt="a non-existent image">
<div fallback>offline</div>
</amp-img>
<amp-img src=
"https://media.geeksforgeeks.org/wp-content/uploads/resize1-1.png"
width="475" height="268"
layout="responsive" alt="AMP">
<noscript>
<img src="/static/samples/img/amp.jpg"
width="475" height="268" alt="AMP">
</noscript>
</amp-img>
</body>
</html>
输出:
相关用法
- Google AMP amp-ad用法及代码示例
- Google AMP amp-accordion用法及代码示例
- Google AMP amp-facebook-like用法及代码示例
- Google AMP amp-carousel用法及代码示例
- Google AMP amp-date-countdown用法及代码示例
- Google AMP amp-brightcove用法及代码示例
- Google AMP amp-bind-recaptcha用法及代码示例
- Google AMP amp-autocomplete用法及代码示例
- Google AMP amp-image-lightbox用法及代码示例
- Google AMP amp-lightbox-gallery用法及代码示例
- Google AMP amp-soundcloud用法及代码示例
- Google AMP amp-mustache用法及代码示例
注:本文由纯净天空筛选整理自somsagar2019大神的英文原创作品 Google AMP amp-img。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。