如何通过src属性选择图片元素并修改其src属性值？

当然可以通过src属性找到目标图片并替换它的src值！你之前的尝试思路完全没问题，只是代码里有几个小语法错误和用法误区，导致没成功，我帮你梳理修正一下：

你之前代码里的问题： #

• 选择器引号闭合错误：你写的img[src='/pic1.png]'把单引号错放在了方括号里面，正确写法应该是img[src='/pic1.png']——单引号要完整包裹属性值，并且在方括号外侧闭合。
• 选择器路径不匹配：原图片的src是/pic1.png（带开头斜杠），但你第一次尝试的document.querySelector("img[src='pic1.png']")少了斜杠，自然匹配不到目标元素。
• 错误使用innerHTML：img是自闭合标签，不存在innerHTML内容，直接修改它的src属性才是替换图片的正确方式。

正确的实现代码： #

// 用正确的选择器定位目标图片
const targetImg = document.querySelector("img[src='/pic1.png']");

// 先检查是否找到元素，避免找不到时触发报错
if (targetImg) {
  // 直接修改src属性完成图片替换
  targetImg.src = "/pic2.png";
  // 如果需要同步更新alt属性（可选，你的原alt已经是clear）
  // targetImg.alt = "clear";
}

额外小技巧： #

如果担心浏览器会把相对路径解析成绝对路径（导致选择器匹配失败），可以用属性结尾匹配的方式，这样不管路径前面有没有域名或额外层级，只要文件名是pic1.png就能匹配到：

const targetImg = document.querySelector("img[src$='pic1.png']");
// 这里的 $= 表示匹配src属性以指定字符串结尾

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