这是一个前端页面开发中常见的bug,自己也不是第一次遇到了。但是由于自己不是经常写前端代码,所以每次重新遇到都要再回忆一下是原因和解决方案,那就记下来以防下次再遇到吧。
bug重现
项目使用Ext组件,需求是在页面上展示一个图片,图片地址作为参数从上一页面传入。我的思路比较简单,就是新建一个pannel,里面写一个html的代码段,代码段大概长这样
"<img id='qrImage' src='com/system/empty.bmp' width='100%' height='100%'>"
1
图片的初始地址是一个临时图片,当获取到我们需要展现的图片地址时,就使用操作页面dom设置为新的地址,设置的地址长这样:
document.getElementById("qrImage").src = filePath;
1
看上去,没有任何的问题,但是页面加载的时候却报错了,错误就在上面这个语句,报错信息是:
Uncaught TypeError: Cannot set property 'src' of null
1
解决思路
不常写前端一下子就露怯了,我第一反应竟然是是不是获取ID的方法写的有问题,比如字母大小写拼错之类的问题。然而现实是残酷的,W3C告诉我方法没有任何问题。
那么既然不是获取属性的方法没问题(其实就不可能是方法名字写错了,不然浏览器会报 is not a function),那肯定是