为什么这个代码不起作用(url肯定很好)，但什么都没发生

您假设css将与您设置的内容完全匹配。问题是它会改变价值。在您的案例中，它将"更改为"；所以它不匹配。

function init() {
let rtsb = document.querySelector('#backSound');
function changeSound() {
// changing sound image:
let url1 = 'url("https://cdn.glitch.com/00f52d97-70e5-4e02-98af-d0b48468a631%2FsoundOn1.jpg?v=1595501327338")';
let url2 = 'url("https://cdn.glitch.com/00f52d97-70e5-4e02-98af-d0b48468a631%2FsoundOff2.jpg?v=1595501337285")';
let imSrc = rtsb.style.backgroundImage;
if (imSrc === url1) {
rtsb.style.backgroundImage = url2;
} else {
rtsb.style.backgroundImage = url1;
}
}
rtsb.addEventListener('click', changeSound);
}
document.addEventListener('readystatechange', function() {
if (document.readyState === "complete") {
init();
}
});

<div id="backSound" style="height:200px">xxx</div>

更好的解决方案是切换css类。

如果使用css并使用一个类在两个图像之间切换，这可能会简单得多。

我将使用类sound-off来指示正在使用第二个图像，如果未设置该类，则默认情况下将使用回退(图像上的声音(：

CSS:#backSound.sound-off比#backSound更具体，因此当设置类时，将使用第二个图像，否则将使用第一个图像。

#backSound {
background-image: url('https://cdn.glitch.com/00f52d97-70e5-4e02-98af-d0b48468a631%2FsoundOn1.jpg?v=1595501327338');
}
#backSound.sound-off {
background-image: url('https://cdn.glitch.com/00f52d97-70e5-4e02-98af-d0b48468a631%2FsoundOff2.jpg?v=1595501337285');
}

JS:点击时，只需打开和关闭类sound-off即可。

function changeSound() {
rtsb.classList.toggle("sound-off");
}

演示：

function init() {
let rtsb = document.querySelector('#backSound');
rtsb.addEventListener('click', e =>
rtsb.classList.toggle("sound-off")
);
}
document.addEventListener('readystatechange', function() {
if (document.readyState === "complete") {
init();
}
});

#backSound {
background-image: url('https://cdn.glitch.com/00f52d97-70e5-4e02-98af-d0b48468a631%2FsoundOn1.jpg?v=1595501327338');
width: 100px;
height: 100px;
background-size: cover;
}
#backSound.sound-off {
background-image: url('https://cdn.glitch.com/00f52d97-70e5-4e02-98af-d0b48468a631%2FsoundOff2.jpg?v=1595501337285');
}

<div id="backSound"></div>

欢迎使用Stackoverflow。我将是那个提出嬉皮士解决方案的人。

你可以在你的HTML中有一个复选框，删除JavaScript并使用CSS，就像这样：

input[type="checkbox"] {
display:none;
}
input[type="checkbox"] + span {
display:inline-block;
width:500px;
height:500px;
padding-top: 5px; /* align the label with the image*/
vertical-align:middle;
background:url(https://cdn.glitch.com/00f52d97-70e5-4e02-98af-d0b48468a631%2FsoundOn1.jpg?v=1595501327338) left top no-repeat;
cursor:pointer;
}
input[type="checkbox"]:checked +  span {
background:url(https://cdn.glitch.com/00f52d97-70e5-4e02-98af-d0b48468a631%2FsoundOff2.jpg?v=1595501337285) left top no-repeat;
}

<label>
<input type="checkbox" id="c1" name="cc" class="mycheckbox" />
<span></span>
</label>