Question

只需要单击按钮，让桌面上的图像显示为背景即可。我正在使用Tryit Editor v3.6

我尝试了使用更多/更少的封闭文件夹的各种文件路径，并尝试使用“，'，/，\语法弄乱...我只是不够了解

<!DOCTYPE html>
<html>
  <body>
    <button onclick="myFunction()">change background</button>

    <script>
      function myFunction() {
        document.body.style.backgroundImage ="/Users/mcgeheer/Desktop/testpic.png"
      }
    </script>
  </body>
</html>

我也尝试过：

document.body.style.backgroundImage ="url( '/Users/mcgeheer/Desktop/testpic.png')";

Answer 1

请添加url() 像这样：

document.body.style.backgroundImage = "url('/Users/mcgeheer/Desktop/testpic.png')"

您可以在devtool中查看此图像的请求状态：

https://developers.google.com/web/tools/chrome-devtools/network/

Answer 2

我认为您正在使用w3schools的TryIt编辑器。

在这种情况下，由于浏览器安全策略是高级拓扑，因此无法从文件系统访问文件。尝试上述操作时，您可能会在控制台中看到这种错误。

Not allowed to load local resource: file:////Users/mcgeheer/Desktop/testpic.png

我建议使用Google上可用的图像URL，而不要使用文件系统上的图像URL。例如https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg

如果您使用类似的方法，它将可以正常工作。

Answer 3

尝试一下，请注意，如果您正在使用在线编辑器，则不能使用本地图像

<!DOCTYPE html>
<html>
<style>
  .background {
    background: black;
    height: 100px;
    width: 100px;
    color: white;
  }
</style>
<body>

<div id="background" class="background">Background</div>

<button onclick="myFunction()">change background</button>
</body>
<script>
    function myFunction() {
      document.getElementById('background').style.cssText = "background-image: url('http://images5.fanpop.com/image/photos/29800000/Blue-Rose-roses-29859433-449-300.jpg');"
    }
</script>
</html>

单击按钮后如何更改背景图像？

3 个答案: