如何用JavaScript将图片src改为本地图片？新手技术求助

算力阿峰

2026-5-11

解决JS切换图片时路径不被浏览器识别的问题

嗨，别担心，刚接触JavaScript遇到这种路径问题太正常了～我来帮你捋清楚问题出在哪，以及怎么搞定它。

问题根源

你当前代码里直接用image.src == "data/pause.png"做判断，但浏览器会自动把相对路径转换成绝对路径（比如http://你的项目域名/data/pause.png），这时候你拿相对路径字符串和绝对路径对比，肯定匹配不上，自然就切换失败了。

解决方法

这里给你两种靠谱的方案，任选其一就行：

方案1：获取原始相对路径做判断

用getAttribute('src')可以拿到你在HTML里写的原始相对路径，而不是浏览器转换后的绝对路径，这样对比就准确了：

function toggle(image) {
    // 获取HTML里写的原始相对路径
    const currentSrc = image.getAttribute('src');
    if (currentSrc !== "data/pause.png") {
        image.setAttribute('src', 'data/pause.png');
    } else {
        image.setAttribute('src', 'data/play.png');
    }
}

方案2：用自定义属性标记状态（更健壮）

避免路径对比的坑，直接给图片加个自定义属性记录当前状态，逻辑更清晰：
首先修改HTML里的图片标签：

<img id="toggle" class="right" src="data/pause.png" data-status="pause" onclick="toggle(this)">

然后更新JS函数：

function toggle(image) {
    const currentStatus = image.getAttribute('data-status');
    if (currentStatus === "pause") {
        image.src = 'data/play.png';
        image.setAttribute('data-status', 'play');
    } else {
        image.src = 'data/pause.png';
        image.setAttribute('data-status', 'pause');
    }
}