這是一個前端頁面開發中常見的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），那肯定是這個dom本身寫的有問題。最直觀的辦法當然就是debug了，bug也比較簡單，跟進去就發現了問題。
原因
“document.getElementById(“qrImage”)”這里，代碼沒有獲取到Id為“qrImage”的元素，那么就是null，null是沒有辦法set屬性的，所以就會瀏覽器就會拋出這個錯誤：
Uncaught TypeError: Cannot set property 'src' of null
1
之后頁面的渲染就會停止，頁面報錯。
解決辦法
解決辦法也很簡單，就是確保在設置屬性之前，qrImage這個元素已經被渲染完成，瀏覽器可以獲取到這個元素，這樣的話就不會報錯。我的項目實際使用了Ext組件，並且使用了ExtBuilder來簡化開發（說明這個是為了防止我的寫法在其他情況下不適用），將代碼替換為：
var infoPanel = Ext.getCmp("saveQR");
infoPanel.html = "<img id='qrImage' src=\"" + url+ "\" width='100%' height='100%'>";
1
2
問題即可解決。
tips
對於沒有使用Ext或者Ext開發組件的小伙伴，可以使用window.load或者afterrender方法來確保頁面加載完再對頁面進行操作即可。