按钮内img点击切换加载失败，报ERR_FILE_NOT_FOUND问题求助

问题现象 #

开发小型社交网站时，点击按钮切换<button>内的<img>图片（同时控制下方文本显示/隐藏），但图片始终加载失败。点击后控制台报错：

GET file:///C:/Users/emile/Desktop/Mini%20learning%20projects/Social%20App/scripts/iconsarrow-up.webp net::ERR_FILE_NOT_FOUND

即使复制了图片路径，仍无法加载，新标签打开图片也提示无法访问。

错误原因 #

1. 路径转义错误：JS代码中使用反斜杠\作为路径分隔符，但在JavaScript字符串里，\是转义字符，会导致路径解析异常。比如'icons\arrow-up.webp'实际会被解析为iconsarrow-up.webp（丢失路径分隔符），自然找不到文件。
2. 相对路径层级错误：HTML中图片使用本地绝对路径，而JS中使用的相对路径icons/...与HTML文件所在的scripts文件夹层级不匹配，导致找不到目标文件。

解决方案 #

1. 修正路径分隔符 #

在JavaScript中，路径分隔符使用正斜杠/，或者用双反斜杠\\（转义后的反斜杠）。

2. 调整相对路径到正确层级 #

假设项目结构为：

Social App/
├── icons/
│   ├── arrow-up.webp
│   └── vector-down-arrow.png
└── scripts/
    └── 你的HTML文件

从scripts文件夹到icons需上退一级，相对路径应为../icons/arrow-up.webp。

3. 统一使用项目内相对路径（推荐） #

避免使用本地绝对路径（如C:\Users\...），改用项目内相对路径，项目移动后路径依然有效。

修正后的代码 #

JavaScript部分 #

function ButtonHide() {
    const element = document.getElementById('friend-request-container'); 
    const personnaInfoDiv = document.getElementById('personnal-info');
    const sideBarArrowTooltip = document.getElementById('sidebup-arrow-tooltip');
    const friendRequestCount = document.getElementById('friend-request-count');
    const sidebarArrowImage = document.getElementById('friends-arrow');

    if (element.style.display === 'none') {
        element.style.display = 'inline-block';
        personnaInfoDiv.style.marginBottom = "0px";
        sideBarArrowTooltip.innerHTML = 'Hide Requests';
        // 修正路径分隔符和层级
        sidebarArrowImage.src = '../icons/arrow-up.webp';
    } else {
        element.style.display = 'none';
        friendRequestCount.style = 'display: inline-block; position: absolute; top: 0px; width: 200px;';
        personnaInfoDiv.style.marginBottom = "15px";
        sideBarArrowTooltip.innerHTML = 'Show Requests';
        // 修正路径分隔符和层级
        sidebarArrowImage.src = '../icons/vector-down-arrow.png';
    }
}

HTML部分（改用相对路径） #

<div class="sidebar">
    <div class="sidebar-top-container">
        <div class="sidebar-heading">
            <h1 class="home">Home</h1> 
            <!-- 改用相对路径 -->
            <a class="create-button" href="./Home Page.html">Create</a>
        </div>
        <div class="personnal-info" style="height: 32px;" id="personnal-info">
            <div class="name-and-profile">
                <!-- 改用相对路径 -->
                <img class="sidebar-profile-picture" src="../icons/my profile.jpg">
                <p class="my-user-name">Emile Feghali</p>
            </div>
            <div class="sidebar-container">
                <button class="hide-requests-button" onclick="ButtonHide()">
                    <!-- 改用相对路径 -->
                    <img class="up-arrow" id="friends-arrow" src="../icons/arrow-up.webp">
                </button>
                <div class="tooltip" id="sidebup-arrow-tooltip">Hide Requests</div>
            </div>
        </div>
        <div class="friend-request-container" id="friend-request-container">
            <!-- 改用相对路径 -->
            <img class="friend-request-image" src="../icons/add-friends-image.jpg">
            <p class="friend-request-count" id="friend-request-count">2 pending friend requests</p>
        </div>
    </div>
</div>

额外检查点 #

• 确认icons文件夹和图片文件确实存在于指定路径下，文件名（包括大小写）完全匹配（Windows系统文件名大小写不敏感，但其他系统敏感，建议统一小写）。
• 打开开发者工具的「网络」面板，查看图片请求的实际路径，对比本地文件路径是否一致，进一步排查问题。

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