net::ERR_FILE_NOT_FOUND 但几乎没有什么不同

Question

I am just learning JS and was trying to change the background image of the selected div block.我只是在学习 JS 并试图更改所选 div 块的背景图像。 But it gave me following error in the browser console:但它在浏览器控制台中给了我以下错误：

net::ERR_FILE_NOT_FOUND net::ERR_FILE_NOT_FOUND

Here I am trying to change the background image of the 'image' div via a JS function using 'this' keyword.在这里，我尝试使用“this”关键字通过 JS 函数更改“图像”div 的背景图像。 The image URL is perfectly correct.图片网址完全正确。 I have checked it in the browser.我已经在浏览器中检查过了。 I don't know what to do.我不知道该怎么办。

 function upDate(previewPic) { document.getElementById("image").style.backgroundImage = "url('previewPic.src')"; }

 <html> <div id="image">Hover over an image below to display here.</div> <img class="preview" alt="Styling with a Bandana" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onmouseover="upDate(this)" /> </html>

When I am doing this, there's is no error:当我这样做时，没有错误：

<script>
function upDate(previewPic) {
    console.log(previewPic.src);
}
</script>

This shows that it is reading the link but not when I'm using it.这表明它正在阅读链接，但在我使用它时却没有。 I have no idea what to do!我不知道该怎么做！

Answer 1

previewPic.src which you are passing as an argument in the URL is not actually the real image source is just string so that replace it with the real source like the following您在 URL 中作为参数传递的previewPic.src实际上并不是真实的图像源只是字符串，因此将其替换为真实的源，如下所示

Example例子

 function upDate(previewPic) { document.getElementById("image").style.backgroundImage = "url('https://cdn-prod.medicalnewstoday.com/content/images/articles/322/322868/golden-retriever-puppy.jpg')"; }

 #image { width: 100%; height: 600px; background-size: cover; }

 <div id="image">Hover over an image below to display here.</div> <img class="preview" alt="Styling with a Bandana" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onmouseover="upDate(this)" />

or if you want the same image as the one you're hovering just do the following或者如果您想要与您悬停的图像相同的图像，请执行以下操作

 function upDate(previewPic) { document.getElementById("image").style.backgroundImage = `url('${previewPic.src}')`; }

 #image { width: 100%; height: 500px; background-size: cover; }

 <div id="image">Hover over an image below to display here.</div> <img class="preview" alt="Styling with a Bandana" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onmouseover="upDate(this)" />

net::ERR_FILE_NOT_FOUND 但几乎没有什么不同

问题描述

1 个解决方案

解决方案1
1 2020-09-05 11:29:47

Example例子

net::ERR_FILE_NOT_FOUND 但几乎没有什么不同

问题描述

1 个解决方案

解决方案1 1 2020-09-05 11:29:47

Example例子

解决方案1
1 2020-09-05 11:29:47