如何修复尝试链接到javascript上的图像时找不到的错误文件

Question

所以我正在尝试更改图像的src属性，这是代码<img id="bulbOn" src = "C:\Users\tt\Desktop\WebDevWebpage\images\pic_bulbon.gif"><button id="buttonBulbOff"> OFF </button><script>    $(document).ready( function() {        $("#buttonBulbOff").click( function () {            $("#bulbOn").attr("src", "C:\Users\tt\Desktop\WebDevWebpage\images\pic_bulboff.gif");        });    });</script>然后，当我单击按钮更改图像时，控制台显示“找不到错误文件”，当我使用绝对路径链接时。

Answer 1

反斜杠（\）是Javascript中的转义字符（以及许多其他类似C的语言）。这意味着当Javascript遇到反斜杠时，它会尝试转义以下字符。例如，是换行符（而不是后跟字母 n 的反斜杠）。\n

这是我在控制台中得到的，当我试图控制台你的绝对路径

控制台结果：C:Users tDesktopWebDevWebpageimagespic_bulboff.gif

这是因为在绝对路径上向后。

这是我的尝试：

<img id="bulbOn" src = "C:\Users\tt\Desktop\WebDevWebpage\images\pic_bulbon.gif">

<button id="buttonBulbOff"> OFF </button>

<script>

    $(document).ready( function() {

        $("#buttonBulbOff").click( function () {

            $("#bulbOn").attr("src", "C:\\Users\\tt\\Desktop\\WebDevWebpage\\images\\pic_bulboff.gif");

        });

    });

</script>

and to solve this issue you may for each backslash you want to output, you need to give Javascript two.

Answer 2

正如@Vikas Keskar所提到的，您需要使用相对路径。将 gif 文件保留在与 html 文件相同的目录中。

<script>

    $(document).ready( function() {

        $("#buttonBulbOff").click( function () {

            $("#bulbOn").attr("src", "pic_bulboff.gif");

        });

    });

</script>

注意：请记住在html文件中链接Jquery，否则此脚本将不起作用。

如果你想用vanilla JavaScript做到这一点，这里是代码：

<script>

    function bulb_off() {

        document.getElementById("bulbOn").src = "pic_bulboff.gif";

    }

</script>

如果您要改用vanilla JavaScript，请确保添加到您的按钮标签中。因此，您的按钮标记应如下所示：onclick="bulb_off()"

<button id="buttonBulbOff" onclick="bulb_off"> OFF </button>