加载图片后使用JS更改图片元素的来源？答案

【问题标题】：Use JS to change the source of an image element after loading the image?加载图片后使用JS更改图片元素的来源？
【发布时间】：2021-07-27 00:00:46
【问题描述】：

是否可以使用 JS（特别是 p5 库）来更改图像元素的来源？我试图在我的网页上制作一个非常低级的幻灯片，我想我可以做这样的事情（代码也在下图中）：

let slide;
function setup() {
    let sliders = ['cap_1.jpg', 'cap_2.jpg', 'spidermen.jpg'];
    let i = 0;
    slide = createImg(sliders[0], 'An image of Steve Rogers');
    slide.parent('container');
    slide.class('images');
    setInterval(changeImg, 2000);
    
} 

const changeImg = () => {
    slide.src = (sliders[1])
}

【问题讨论】：

因为你总是得到索引 1，所以图像永远不会改变。
document.getElementById('image').setAttribute('src', '/path/to/image.jpg');
@Someone_who_likes_SE 谢谢，但网页应该将图像从索引 0 中的图像更改为索引 1，但它没有这样做。我还有什么做错的？ :(感谢您再次提供帮助，寿 :)

标签： javascript image imagesource

【解决方案1】：

“sliders”变量不可用于“changeImg”函数，因为它位于“setup”函数的scope 中。尝试类似

let slide;
function setup() {
    let sliders = ['cap_1.jpg', 'cap_2.jpg', 'spidermen.jpg'];
    // I don't know anything about the p5 library, so I'm assuming 
    // all of the code below runs (i.e. createImg() returns an HTML img element); if not, look into functions like
    // document.createElement(), because it's not always 
    // straightforward or obvious how to change certain element 
    // attributes like classes and parents
    slide = createImg(sliders[0], 'An image of Steve Rogers');
    slide.parent('container');
    slide.class('images');
    setInterval(() => changeImg(sliders[1]), 2000);
    
} 

const changeImg = (targetUrl) => {
    slide.src = targetUrl;
}

【讨论】：

仅供参考，即使代码正在运行，它也只会更改一次图像。
yes OP，如果您要制作实际的幻灯片，您还有更多工作要做 - 希望我的回答有助于您理解主要问题，即变量的范围
@BrendanBond 非常感谢您的帮助和时间，希望您度过愉快的一天！！

【解决方案2】：

有几个问题：

在您的changeImg() 中，您仅使用数组中的索引1，它永远不会前进到下一张图片。
因为changeImg() 与setup() 在不同的范围内，它无法访问在setup() 函数内创建的变量，因此sliders 和i 都无法访问。
幻灯片一旦开始，就无法停止。

function setup() {
    let sliders = ['https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w102-h68-n-l50-sg-rj', 'https://lh3.googleusercontent.com/9pPCK70Rw0k3wethMHb1qMaIB0VjeWLy57vYgSzKbF7oJuvO2nA0Nakk-95cvibWUDcEhYkfCKvdPKT03tXZd4M5jdhIEibLO9qw-XE=w102-h68-n-l50-sg-rj', 'https://lh3.googleusercontent.com/fl-GT6w3Ls6RT4vYnbkuYUyLY3lZJH8VtZ7xzxiym9YYaoVRCnZehdz6Icd0oAf6i3H9-O5cCNs6eunlxWr_Csstgsb98DdzNdLFBOlhw9NUfHdyuQjI=w76-h102-n-l50-sg-rj'];
    let i = 0;
/*
    let slide = createImg(sliders[0], 'An image of Steve Rogers');
    slide.parent('container');
    slide.class('images');
*/
    let slide = document.createElement("img");
    slide.src = sliders[0];
    slide.title = 'An image of Steve Rogers';
    slide.className = "images";
    document.body.appendChild(slide);
    const changeImg = () => {
        slide.src = sliders[++i % sliders.length];
    }
    return setInterval(changeImg, 2000);
    
} 

let interval = setup(); //clearInterval(interval) to stop the slideshow

【讨论】：