更改背景圖片網址
[英]Change the background image URL
問題描述
我試圖有一個功能來更改div中的背景圖片網址（請參見下文）。 運行時， net::ERR_FILE_NOT_FOUND在控制台中顯示net::ERR_FILE_NOT_FOUND 。 新映像是否必須在本地托管？
<html> <head> <script> function changeback() { var x = document.getElementById('im').value; document.getElementById('containerH').style.backgroundImage = 'url(img/'+x+')'; } </script> </head> <body> <textarea id="im" onKeyUp="changeback();" onKeyPress="changeback();"></textarea> <br> <div id="containerH" style="background-image:url(https://thejasfiles.files.wordpress.com/2015/07/summerholidays-heading.jpg); width:200px; height:400px; margin-left: 12%; margin-top: -2%;"> </div> </div> </body> </html>
1 個解決方案
解決方案1
1 已采納 2018-01-04 20:17:54
這是因為'url(img/'+x+')'; 值。 img/是當前頁面的相對路徑 ，因此它將嘗試在相對的'img'文件夾中本地查找圖像。
<html > <head> <script> function changeback() { var x = document.getElementById('im').value; document.getElementById('containerH').style.backgroundImage = 'url(' + x + ')'; } </script> </head> <body> <textarea id="im" onKeyUp="changeback();" onKeyPress="changeback();"></textarea><br> <div id="containerH" style="background-image:url(https://thejasfiles.files.wordpress.com/2015/07/summerholidays-heading.jpg); width:200px; height:400px; margin-left: 12%; margin-top: -2%;"> </div> </div> </body> </html>
有關相對路徑和絕對路徑之間的區別，請參見另一篇文章。
如何使用 JavaScript 從用戶輸入 (URL) 更改背景圖像
[英]How to change background image from user input (URL) using JavaScript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.