如何修复尝试链接到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>&nbsp; &nbsp; $(document).ready( function() {&nbsp; &nbsp; &nbsp; &nbsp; $("#buttonBulbOff").click( function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#bulbOn").attr("src", "C:\\Users\\tt\\Desktop\\WebDevWebpage\\images\\pic_bulboff.gif");&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });</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>&nbsp; &nbsp; $(document).ready( function() {&nbsp; &nbsp; &nbsp; &nbsp; $("#buttonBulbOff").click( function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#bulbOn").attr("src", "pic_bulboff.gif");&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });</script>注意：请记住在html文件中链接Jquery，否则此脚本将不起作用。如果你想用vanilla JavaScript做到这一点，这里是代码：<script>&nbsp; &nbsp; function bulb_off() {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("bulbOn").src = "pic_bulboff.gif";&nbsp; &nbsp; }</script>如果您要改用vanilla JavaScript，请确保添加到您的按钮标签中。因此，您的按钮标记应如下所示：onclick="bulb_off()"<button id="buttonBulbOff" onclick="bulb_off"> OFF </button>