使用 JavaScript 不会更改图像源

Question

我觉得我有这个权利，但出于某种原因，addEventListener 没有按照我想要的方式运行。当我尝试更改下面的 img.src 时，它仍然只显示 'images/expand.jpeg' img。我已经确认图像的路径是正确的，因为当我将按钮的原始 src 更改为 'images/collapse.png'.

时它确实显示了 'images/collapse.png'

document.querySelectorAll('.title').forEach(function(){
    let button = document.createElement('img');
    button.classList.add('smallbutton');
    button.src = "images/expand.jpeg"; 
    eachTitleDiv.append(button);
    button.addEventListener('click', function(){
        if (button.src === "images/expand.jpeg") {
            button.src = "images/collapse.png";
        } else if (button.src === "images/collapse.png") {
            button.src = "images/expand.jpeg";
        };
    });
});

Answer 1

相对 src 属性在 DOM

中计算为绝对 URL

当您访问 src 属性时，它是计算的 DOM 值，而您的相对值 link 计算的是绝对值 link。 (https://yourwebsite.com/images/expand.jpeg === "images/expand.jpeg") returns 假
总是在你的图片上有一个 alt，就像在这种情况下，它们不会加载，对于视障人士，SEO 有很多原因！

这是一个工作片段，其中 alt 用于检查状态而不是 src:

document.querySelectorAll('.title').forEach(function(eachTitleDiv){
    let button = document.createElement('img');
    button.classList.add('smallbutton');
    button.src = "images/expand.jpeg";
    button.alt = "expand"
    eachTitleDiv.append(button);
    button.addEventListener('click', (e) => {
        if (button.alt === "expand") {
            button.src = "images/collapse.png";
            button.alt = "collapse"
        } else if (button.alt === "collapse") {
            button.src = "images/expand.jpeg";
            button.alt = "expand"
        };
    });
});

<h1 class="title">Title 1</h1>
<h2 class="title">Title 2</h2>
<p>Not a title</p>

使用 JavaScript 不会更改图像源

Image src won't change using JavaScript

javascript

src

相对 src 属性在 DOM