更改背景图片网址
[英]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.