CS50 PSet8页面图片切换异常：仅切换一次无法复原求助

问题描述 #

我正在VS Code网页编辑器中完成CS50的PSet 8任务，希望网站首页能交替显示两张个人图片。当前代码仅能将图片src从初始值author.JPG切换为author2.jpg一次，之后无法切换回去。已确认文件名完全匹配，推测是代码逻辑问题，请求排查思路。

用户提供的代码：

// Toggles source of image

function rotate()
{
    let pic = document.querySelector('img');
    if (pic.src == 'author2.jpg')
    {
      pic.src = 'author.JPG';
    }
    else
    {
      pic.src = 'author2.jpg';
    }
}

// Rotate every 500ms
window.setInterval(rotate, 3000);

</script>
  <title>My Webpage</title>
</head>
<body>
  <div class="container">
      <div class="row">
        <div class="col">
          <a href="index.html">Home</a>
        </div>
        <div class="col">
          <a href="aboutme.html">About Me</a>
        </div>
        <div class="col">
          <a href="myprojects.html">My projects</a>
        </div>
        <div class="col">
          <a href="resume.html">Resume</a>
        </div>
      </div>
    </div>
  <img src = "author.JPG" alt="The author of this web page" width="600" height="500">
</body>

问题根源 #

问题出在pic.src的取值逻辑上：它返回的是完整的绝对URL（比如http://localhost:8000/author2.jpg），而非你编写的相对路径author2.jpg。第一次切换后，后续的判断pic.src == 'author2.jpg'永远不成立，代码只会持续执行else分支，因此无法切回原图。

解决方法 #

方法1：用getAttribute获取原始相对路径 #

直接读取元素上的原始路径属性，避开绝对路径的干扰：

function rotate()
{
    let pic = document.querySelector('img');
    let currentSrc = pic.getAttribute('src');
    if (currentSrc === 'author2.jpg')
    {
      pic.setAttribute('src', 'author.JPG');
    }
    else
    {
      pic.setAttribute('src', 'author2.jpg');
    }
}

方法2：用includes判断URL包含关系 #

判断当前URL是否包含目标文件名，无需关注绝对路径前缀：

function rotate()
{
    let pic = document.querySelector('img');
    if (pic.src.includes('author2.jpg'))
    {
      pic.src = 'author.JPG';
    }
    else
    {
      pic.src = 'author2.jpg';
    }
}

方法3：用独立状态变量跟踪显示状态 #

完全脱离src属性，用变量记录当前显示的图片状态：

let isShowingFirstPic = true;

function rotate()
{
    let pic = document.querySelector('img');
    pic.src = isShowingFirstPic ? 'author2.jpg' : 'author.JPG';
    isShowingFirstPic = !isShowingFirstPic;
}

内容的提问来源于stack exchange，提问作者Jon Stroshine