<!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
>
<
amp-img
src
=
width
=
"1080"
height
=
"610"
layout
=
"responsive"
alt
=
"AMP"
>
</
amp-img
>
<
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
>