一个图像元素中的多个图像源

Question

我对 Javascript 很陌生（没有 jquery pls），我想知道是否可以将多个图像源放在一个图像元素中

sadImages = document.createElement("img");
sadImages.src = "video/sadness/sadPhoto1.png";
sadImages.className = "projectImages";
sadScrollContainer.append(sadImages);

我想从悲伤文件夹中添加更多图像（不是全部。）而不创建太多图像元素。

我试过这样写

sadImages.src = "video/sadness/sadPhoto1.png" + "video/sadness/sadPhoto2.png";

和

sadImages.src = "video/sadness/sadPhoto1.png","video/sadness/sadPhoto2.png";

和

sadImages.src = ["video/sadness/sadPhoto1.png","video/sadness/sadPhoto2.png"];

但这不起作用。 这可能真的很愚蠢，但我试图让我的代码尽可能短。

Answer 1

您不能创建 1 个内部图像很少的图像元素。

要不手动创建图像，您可以创建存储所有图像路径的数组，然后为数组中的每个路径创建 img 元素

const images = 
['video/sadness/sadPhoto1.png','video/sadness/sadPhoto2.png']
images.forEach((img)=>{
    sadImages = document.createElement("img");
    sadImages.src = img;
    sadImages.className = "projectImages";
    sadScrollContainer.append(sadImages);
})

Answer 2

RTM也许 srcset 或 sizes 很有用

响应式图像有示例

<img srcset="sad-480w.jpg 480w,
             sad-800w.jpg 800w"
     sizes="(max-width: 600px) 480px, 800px"
 src="sad-800w.jpg"
 alt="sad">

或者使用 JSON

 console.log(JSON.parse(document.getElementById('img1').dataset.alternative))

 <img id="img1" src="sad1.jpg" data-alternative='["sad2.jpg","sad3.jpg"]' />

Answer 3

如果要在图像源列表中旋转，则必须为图像元素分配数据属性。 这可以通过访问dataset属性来实现。

 const createMultiImage = (sources, startingIndex = 0) => { const img = new Image(); img.className = 'multi-image'; img.dataset.currentIndex = startingIndex; img.dataset.sources = JSON.stringify(sources); img.src = sources[startingIndex]; return img; }; const duration = 2000, container = document.querySelector('#container'), multiImage = createMultiImage([ "http://placekitten.com/200/200", "http://placekitten.com/200/300", "http://placekitten.com/300/200", "http://placekitten.com/300/300" ]); const incrMulti = (img, count) => { const sources = JSON.parse(img.dataset.sources), currentIndex = parseInt(img.dataset.currentIndex, 10), nextIndex = (currentIndex + count + sources.length) % sources.length; img.src = sources[nextIndex]; img.dataset.currentIndex = nextIndex; }, nextMulti = img => incrMulti(img, 1), prevMulti = img => incrMulti(img, -1), // Unused nextMultiAll = () => document.querySelectorAll('.multi-image').forEach(nextMulti); container.append(multiImage); setInterval(nextMultiAll, duration);

 <div id="container"></div>