samouri
commented
4 years ago @nikhilambre: can you provide an entire copy/pasteable html file or a link to a repro? I've just tried to piece one together from your description, but the amp-img loaded fine.
See:
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
<title>scroller</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.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>
</head>
<style>
.spot-ul {
list-style: none;
margin: 8em 0 0 0;
padding: 0;
}
.spot-ul li {
display: block;
padding: 0;
/* height: 1.6em; */
}
.spot-ul li a {
font-size: 1.2em;
display: block;
padding: 0;
color: #ddd;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
.spot-ul li a .img {
width: 250px;
z-index: 999999;
height: auto;
visibility: visible;
/* height: 4em; */
}
.spot-ul li a:hover {
color: #FAC018;
}
.spot-anim {
position: absolute;
bottom: 0;
transform: translateY(-6em);
animation-duration: 5s;
-webkit-animation-name: spotlight;
-o-animation-name: spotlight;
animation-name: spotlight;
}
@keyframes spotlight {
0% {
transform: translateY(6em);
}
30% {
transform: translateY(-1em);
}
70% {
transform: translateY(-1em);
}
100% {
transform: translateY(-6em);
}
}
</style>
<body>
<div class="spot-wr">
<amp-script layout="fixed-height" height="4em" script="spot-scroll" class="" data-ampdevmode
style="opacity: 1;display: block;">
<ul class="spot-ul" id="spot-ul">
<li><a href="#">1.President sends message of unity and solidarity to Member
Associations</a>
</li>
<li><a href="#">
<amp-img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
width="720" height="60" layout="responsive" class="img" style="display: block;"
alt="AFC ad popup"
sizes="(min-width: 992px) 720px, (min-width: 760px) 580px, 250px">
</amp-img>
</a>
</li>
</ul>
</amp-script>
<script id="spot-scroll" type="text/plain" target="amp-script">
var i = 0;
var x = document.getElementById('spot-ul').getElementsByTagName('li');
x[i].classList.add('spot-anim');
x.forEach(t => t.addEventListener("webkitAnimationEnd", myEndFunction, false));
x.forEach(t => t.addEventListener("animationend", myEndFunction, false));
x.forEach(t => t.addEventListener("oAnimationEnd", myEndFunction, false));
x.forEach(t => t.addEventListener("msAnimationEnd", myEndFunction, false));
function myEndFunction() {
x[i].classList.remove('spot-anim');
if((i+1) === x.length) {
i = 0;
x[i].classList.add('spot-anim');
} else {
i++;
x[i].classList.add('spot-anim');
}
}
</script>
</div>
</body>
</html>Note: the img from some.com failed to load for me, I don't think its a valid img link
stale[bot]
What's the issue?
Image not rendering on page while the amp-img is out of the viewport
How do we reproduce the issue?
I have created my own auto scroll with amp-script, keyframe animations. It works well with text in it but when tried to use with images. Img tag is found missing from amp-img.
Here are snaps from test code, even when element in viewport img tag is not added -
Here is scroller code -
Here is styling -
animation keyframe -
Is there any way I can make images visible.
What browsers are affected?
Any Browser
Which AMP version is affected?
Powered by AMP ⚡ HTML – Version 2008290323001