通过js的DOM改变img的src的值实现图片切换

我想通过js改变img的src值来实现图片切换，源代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>  
    *{margin:0;padding:0;}
    #outer{width:500px;margin:0 auto;background-color: aquamarine;text-align: center;}
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var prew=document.getElementById("prew");
            var next=document.getElementById("next");
            var img=document.getElementsByTagName("img")[0];
            var  noArr=["newProtect/140005.png" ,"newProtect\135907.png"]
             var index=0;
            prew.onclick=function(){
                index--;
                if(index<0){
                   index=1;
                }
                img.src=noArr[index]
            }
            next.onclick=function(){
            index++;
                if(index>noArr.length-1){
                    index=0;
                } 
                img.src=noArr[index]
             }
        }
    </script>
<body>
    <div id="outer">
        <img src="newProtect\135907.png" alt="方向">
        <button id="prew">上一张</button>
        <button id="next">下一张</button>
    </div>
</body>
</html>

在edge,chrome,火狐里运行都出错了，点击下一张时图片显示不出来，然后我在chrome浏览器的控制台里看见当我点击下一张时会出现 GET file:///F:/study/newProtect]907.png net::ERR_FILE_NOT_FOUND 这个错误，这是为什么啊？（我在最开始通过JS来改变src值时出现了Failed to load resource : net :: ERR _ FILE _ NOT _ FOUND这个情况，后来我通过把 img.src=值后面的图片路径改成了绝对路径，并且前面加了三个斜线。就是///F:/study/newProtect/mark_1.png这个格式点击下一张时图片就加载出来了，后面就算把路径再改为相对路径也可以了。这和上面问题是不是有什么联系啊）

基于Monster 组和GPT的调写：

你的图片路径包含反斜杠\，但在HTML中，路径应该用正斜杠/或双反斜杠\。

你把图片路径中的反斜杠\替换为正斜杠/，或者用双反斜杠\来表示路径。下面是修改后的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>  
    *{margin:0;padding:0;}
    #outer{width:500px;margin:0 auto;background-color: aquamarine;text-align: center;}
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var prew=document.getElementById("prew");
            var next=document.getElementById("next");
            var img=document.getElementsByTagName("img")[0];
            var noArr=["newProtect/140005.png" ,"newProtect/135907.png"];
            var index=0;
            prew.onclick=function(){
                index--;
                if(index<0){
                   index=1;
                }
                img.src=noArr[index];
            };
            next.onclick=function(){
                index++;
                if(index>noArr.length-1){
                    index=0;
                } 
                img.src=noArr[index];
             };
        };
    </script>
</head>
<body>
    <div id="outer">
        <img src="newProtect/135907.png" alt="方向">
        <button id="prew">上一张</button>
        <button id="next">下一张</button>
    </div>
</body>
</html>

在修改后的代码中，我把图片路径中的反斜杠\替换为正斜杠/，并修复了一些代码的语法错误（例如缺少分号）。

这样修改后，应该可以正常切换图片了。

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

问题出在图片路径的格式上，建议将路径中的反斜杠改为正斜杠，并使用相对路径。例如：

var noArr = ["newProtect/140005.png", "newProtect/135907.png"];

// ...

<img src="newProtect/135907.png" alt="方向">

这样就可以正常切换图片了。另外，如果图片路径中有空格，也建议将空格替换为 %20。