使用 setAttribute 修改图片 src 属性时报错的解决方案
在JavaScript操作DOM的过程中，我们经常会需要动态修改图片的src属性来切换图片内容，这时候通常会用到setAttribute方法。但不少开发者在使用这个方法时遇到过报错，导致图片无法正常加载。本文将梳理常见的报错场景，并给出对应的解决方案。
常见报错场景一：未正确获取图片元素
最常见的问题是调用setAttribute之前，没有正确获取到目标图片元素，或者元素还未加载完成就执行了操作，这时候会报Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')的错误。
比如下面的代码，脚本写在<head>标签里，页面还没解析到图片元素就执行了操作，就会触发报错：
// 错误示例：脚本在head中执行，此时图片元素还未加载
const img = document.getElementById('myImg');
// 此时img为null，调用setAttribute会报错
img.setAttribute('src', 'https://ipipp.com/test1.jpg');解决方案是将脚本放在页面底部，或者使用DOMContentLoaded事件监听，确保DOM加载完成后再执行操作：
// 解决方案1：将脚本放在body底部，图片元素之后
// 页面解析到脚本时，图片元素已经存在
const img = document.getElementById('myImg');
img.setAttribute('src', 'https://ipipp.com/test1.jpg');// 解决方案2：使用DOMContentLoaded事件监听
document.addEventListener('DOMContentLoaded', function() {
const img = document.getElementById('myImg');
img.setAttribute('src', 'https://ipipp.com/test1.jpg');
});常见报错场景二：路径格式错误导致加载失败
如果setAttribute传入的src路径格式不正确，浏览器会报资源加载失败的错误，比如GET https://ipipp.com/test2.jpg 404 (Not Found)。这种情况不是setAttribute方法本身报错，但是会让开发者误以为是方法使用有问题。
常见的路径问题包括：相对路径基准错误、URL拼写错误、本地路径使用了错误的格式。如果是本地图片，需要注意相对路径是相对于当前HTML文件的位置，或者使用绝对路径：
// 正确示例：使用正确的相对路径
// 假设图片和HTML文件在同一目录
const img = document.getElementById('myImg');
img.setAttribute('src', './image.png');
// 或者使用绝对路径，从项目根目录开始
img.setAttribute('src', '/static/image.png');如果是网络图片，要确保URL格式正确，没有多余的空格或者特殊字符，同时确认资源确实存在可访问。
常见报错场景三：属性名拼写错误
部分开发者会误将属性名写成Src、SRC等大小写错误的格式，虽然HTML属性不区分大小写，但在JavaScript中使用setAttribute时，如果写成其他大小写形式，虽然不会直接报错，但可能无法正确生效，或者在某些严格模式下出现问题。建议统一使用小写属性名：
// 错误示例：属性名大小写错误，可能无法正确设置
const img = document.getElementById('myImg');
img.setAttribute('Src', 'https://ipipp.com/test3.jpg'); // 不推荐
// 正确示例：使用标准小写属性名
img.setAttribute('src', 'https://ipipp.com/test3.jpg'); // 推荐替代方案：直接修改src属性
除了使用setAttribute方法，我们也可以直接修改图片元素的src属性，这种方式更简洁，也不容易出现方法调用相关的问题：
const img = document.getElementById('myImg');
// 直接修改src属性，效果和修改src属性一致
img.src = 'https://ipipp.com/test4.jpg';两种方式的核心区别是：setAttribute修改的是元素的属性节点，而直接赋值修改的是DOM对象的属性。对于src这类标准属性，两种方式最终效果是一致的，开发者可以根据习惯选择使用。
总结
使用setAttribute修改图片src属性时的报错，大多不是方法本身的问题，而是元素获取时机、路径格式、属性名拼写等细节问题。只要确保DOM加载完成后再操作元素、传入正确的路径、使用标准的属性名，就可以避免绝大多数报错。如果遇到问题，也可以先通过console.log打印获取到的元素，确认元素是否存在，再逐步排查问题。