更改背景图片网址
[英]Change the background image URL
问题描述
I am trying to have a function to change the background image URL in a div (see below). 
我试图有一个功能来更改div中的背景图片网址（请参见下文）。 It shows net::ERR_FILE_NOT_FOUND in the console when running. 运行时， net::ERR_FILE_NOT_FOUND在控制台中显示net::ERR_FILE_NOT_FOUND 。 Does the new image have to be hosted locally? 新映像是否必须在本地托管？
<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
It is because of the 'url(img/'+x+')'; 这是因为'url(img/'+x+')'; value. 值。 img/ is a relative path to the current page and therefore it will try to lookup the image locally inside the relative 'img' folder. 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>
See this other post about the difference between relative and absolute paths . 有关相对路径和绝对路径之间的区别，请参见另一篇文章。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.