图片加载失败求助：开关未选中时显示红色图片遇404错误

安全阿岳

2026-7-25

图片加载404问题排查与解决

问题背景

开关未选中（false）时需显示红色图片，但出现404错误：GET http://localhost:5173/welcome_login.svg 404 (Not Found)，相关代码如下：

function color_switch(){
    const red_switch = document.getElementById('welcome-back-div-image-login-id').style.backgroundImage = "url('./background_image_login_red.svg')";
    const dark_switch = document.getElementById('welcome-back-div-image-login-id').style.backgroundImage = "url('./welcome_login.svg')";
    document.getElementById('switch').checked ?  red_switch : dark_switch;
}

组件截图

错误原因分析

路径不匹配：./welcome_login.svg 是相对当前HTML文件的路径，说明该图片文件不在HTML同级目录，或是构建工具（如Vite）的资源解析规则导致路径错误。
逻辑无效：当前代码会先执行两次背景图赋值（红色图被深色图直接覆盖），最后三元表达式仅做无意义判断，根本没实现切换逻辑。

解决步骤

1. 修正图片路径

检查项目目录结构：确认welcome_login.svg和background_image_login_red.svg的实际位置，调整相对路径（比如HTML在src文件夹，图片在src/assets，则路径应为./assets/welcome_login.svg）。
若使用Vite等构建工具，建议将图片放入public目录，改用绝对路径引用：url('/welcome_login.svg')（public目录资源会直接映射到打包后的根路径）。

2. 修复代码逻辑

重新编写切换逻辑，避免无效赋值：

function color_switch(){
    const targetElement = document.getElementById('welcome-back-div-image-login-id');
    const isSwitchChecked = document.getElementById('switch').checked;
    // 根据开关状态设置对应背景图，注意替换为正确路径
    targetElement.style.backgroundImage = isSwitchChecked 
        ? "url('./background_image_login_red.svg')" 
        : "url('./welcome_login.svg')";
}