请回答这个问题,因为我正在努力解决这个问题。
我正在尝试更改鼠标上的图像源。我能够做到,但图片没有在页面上显示。
我正在尝试将图片源更改为跨域网址。我可以看到在DOM图像源中正在发生变化,但在页面上却没有。
我已经尝试了LINK中提到的所有解决方案,但它们都没有奏效。
请让我解决问题。
注意:
CODE:
document.getElementsByTagName('img')[0].addEventListener('mouseover', function()
{
document.getElementsByTagName('img')[0].setAttribute('src', 'url/of/the/image');
});
答案 0 :(得分:0)
您是否尝试过将图像加载到其他所有内容之前?
function initImages(){
var imC = 0;
var imN = 0;
for ( var i in Images ) imN++;
for(var i in Images){
var t=Images[i];
Images[i]=new Image();
Images[i].src=t;
Images[i].onload = function (){
imC++;
if(imC == imN){
console.log("Load Completed");
preloaded = 1;
}
}
}
}
和
var Images = {
one image: "path/to/1.png",
....
}
然后
if( preloaded == 1 ){
start_your_page();
}
答案 1 :(得分:0)
此处代码将删除img
标记并将其替换为新标记:
document.getElementsByTagName('img')[0].addEventListener('mouseover', function() {
var parent = document.getElementsByTagName('img')[0].parentElement;
parent.removeChild(document.getElementsByTagName('img')[0]);
var new_img = document.createElement("img");
new_img.src = "https://upload.wikimedia.org/wikipedia/commons/6/69/600x400_kastra.jpg";
parent.appendChild(new_img);
});

<img src="https://www.w3schools.com/w3images/fjords.jpg">
&#13;
答案 2 :(得分:0)
我使用代码解决了这个问题:
function displayImage() {
let image = new image();
image.src="source/of/image/returned/from/service";
image.addEventListener('load', function () {
document.getElementsByTagName('img')[0].src = image.src;
},false);
}
在代码中,我将加载事件附加到图像,图像源将在加载图像后更改。