在网页开发的世界里，JavaScript 是一把万能钥匙，它能让你轻松改变页面的每一个细节——比如图片的来源（src），你有没有遇到过这样的场景：点击一个按钮，原本灰蒙蒙的图片突然变得生动起来？这就是 JavaScript 的魔力！我们就来手把手教你如何用 JavaScript 更换图片的 src 属性,就像给一张老照片换上新装一样简单。

我们要明确一点：HTML 中的 <img> 标签有个叫 src 的属性，它决定了图片从哪里加载，如果你只想动态替换这张图，而不想刷新整个页面，那 JavaScript 就是你最好的帮手，操作步骤并不复杂，只需要三步：找到元素、修改属性、验证结果。

第一步，获取你要操作的图片元素，这一步就像是找钥匙孔，你得先知道哪把“钥匙”对应哪个“锁”，你可以用 document.getElementById() 或者 querySelector() 来定位目标图片,举个例子：

<img id="myImage" src="old.jpg" alt="旧图">

这段代码中，我们给图片加了一个 ID：myImage，在 JS 里这样写：

const img = document.getElementById("myImage");

这就相当于我们拿到了这张图的“身份证”,现在可以对它为所欲为了！

第二步，修改 src 属性，这时候，你就可以像魔术师一样，让图片瞬间“变脸”,只要一行代码：

img.src = "new.jpg";

这行命令的意思是：“把原来指向 old.jpg 的路径换成 new.jpg。”浏览器会自动重新加载新图片，用户几乎感觉不到延迟,体验流畅自然。

第三步，验证是否成功，你可以打开浏览器开发者工具（按 F12），在控制台输入 console.log(img.src)，看看输出是不是你设定的新地址,或者直接观察页面上的图片是否已经更新。

为了让操作更清晰，下面是一个完整的对比表格,帮你理解不同方法的效果差异：

方法 是否需要 DOM 元素 是否立即生效 适用场景
img.src = "new.jpg" ✅ 需要 ✅ 立即 单张图片切换
img.setAttribute("src", "new.jpg") ✅ 需要 ✅ 立即 更灵活，可扩展
img.onload = function(){...} ✅ 需要 ⚠️ 延迟 想监听加载完成

你会发现，第一种方式最直观，也最容易上手，但如果你想在图片加载完成后做点额外的事（比如显示提示文字）,第二种方式就更有优势了。

再举个生活化的比喻：想象你在一家咖啡馆，桌上有一杯冷掉的拿铁，你点了新一杯热的，服务员马上端来——这就是 src 改变的过程，而如果服务员先问你“要不要加奶？”再给你杯子，那就是用 setAttribute,多了一层沟通。

最后提醒一点：别忘了图片路径要正确！相对路径和绝对路径搞混了，可能会导致图片加载失败。./images/new.jpg 和 /images/new.jpg 在不同目录结构下可能完全不同。

更换图片的 src 不是魔法，而是逻辑清晰的小技巧，只要你按照步骤一步步来，哪怕你是初学者，也能像老司机一样熟练操作，每一次点击按钮背后的逻辑，都是你成长的足迹,轮到你动手试试了！