net::ERR_FILE_NOT_FOUND 但幾乎沒有什么不同

Question

我只是在學習 JS 並試圖更改所選 div 塊的背景圖像。 但它在瀏覽器控制台中給了我以下錯誤：

net::ERR_FILE_NOT_FOUND

在這里，我嘗試使用“this”關鍵字通過 JS 函數更改“圖像”div 的背景圖像。 圖片網址完全正確。 我已經在瀏覽器中檢查過了。 我不知道該怎么辦。

 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>

當我這樣做時，沒有錯誤：

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

這表明它正在閱讀鏈接，但在我使用它時卻沒有。 我不知道該怎么做！

Answer 1

您在 URL 中作為參數傳遞的previewPic.src實際上並不是真實的圖像源只是字符串，因此將其替換為真實的源，如下所示

例子

 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)" />

或者如果您想要與您懸停的圖像相同的圖像，請執行以下操作

 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

例子

net::ERR_FILE_NOT_FOUND 但幾乎沒有什么不同

問題描述

1 個解決方案

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

例子

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