AMP HTML pages do not support the standard img tag, we use amp-img component to insert images in AMP HTML pages. The amp-img component does not require a script to be embedded in the header as it comes amp runtime.
Script Required: The amp-img is a built-in element so is automatically imported via AMP runtime.
HTML
Attributes:
- src: Specifies the URL or path of the image that is to be embedded.
- sizes: Defines size of the media query this can be only used when attribute rel=”icon”.
- attribution: This is a string that depicts the attribution of the image.
- height: Defines the height of the image.
- width: Defines the width of the image.
Example:
HTML
<!doctype html> < html ⚡>
< head >
< meta charset = "utf-8" >
< title >Google AMP amp-img</ title >
> < script async src =
</ script >
< link rel = "canonical" href =
< 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 =
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 >
|
Output:
Article Tags :