django使用圖片延時加載引起后臺404錯誤
環(huán)境 django 1.10.6
緣起
今天接到一個任務(wù)——解決終端滿屏日志中的無用錯誤。 django 會盡可能給你準確報出錯誤位置，但是一些復(fù)雜，深層次的錯誤它自帶的錯誤日志有些不足了，日志多但是卻無效。
過程
對于后臺日志太多而無用，我則直接轉(zhuǎn)到瀏覽器查看控制臺訪問情況，得到如下提示
直接去后臺匹配這個錯誤：undefined。根據(jù)這個錯誤完全定位不到具體哪兒出了問題。我調(diào)試跟蹤發(fā)現(xiàn)進入到一個特定的頁面會一定出現(xiàn)這個問題，而如果換一個頁面則不出現(xiàn)錯誤。 得此，我進而對這個頁面進行跟蹤，我嘗試替換頁面的做法，最終定位到一段 html 代碼就會引起該錯誤：
<img src="/static/msite/image/qrcode_for_gh.jpg">
我很詫異一個img標(biāo)簽會引起后端訪問一個錯誤的地址，但是卻完全不知道原因。 我嘗試替換這個img的src,結(jié)果依然還是相同錯誤。
在用firebug調(diào)試下發(fā)現(xiàn)問題，上圖：
根據(jù)調(diào)用堆棧的提示，去追尋相關(guān)js如下圖
最終才知道這個圖片地址被惰性加載了，然后在惰性加載后，img的src變成 undefined引發(fā)后端訪問一個不存在的地址。
解決
在使用前，處理一下 src 值
function imageLoaded(obj, src) {
var img = new Image();
if(src===undefined){
src='';
}
img.onload = function() {
obj.src = src;
};
img.src = src;
}
相關(guān)文章
這篇文章主要介紹了pandas刪除行刪除列增加行增加列的實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
本文主要介紹了Python自動掃碼支付的實現(xiàn)示例,包括二維碼識別、自動填寫支付信息、自動點擊支付等過程,具有一定的參考價值,感興趣的可以了解一下2023-11-11
淺談python的輸入輸出，注釋，基本數(shù)據(jù)類型
這篇文章主要介紹了python的輸入輸出，注釋，基本數(shù)據(jù)類型，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
使用Python快速搭建HTTP服務(wù)和文件共享服務(wù)的實例講解
今天小編就為大家分享一篇使用Python快速搭建HTTP服務(wù)和文件共享服務(wù)的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-06-06
使用Keras構(gòu)造簡單的CNN網(wǎng)絡(luò)實例
這篇文章主要介紹了使用Keras構(gòu)造簡單的CNN網(wǎng)絡(luò)實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-06-06
垃圾回收大家應(yīng)該多多少少都了解過，本文詳細的介紹了Python垃圾回收是怎么實現(xiàn)的，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
下面小編就為大家?guī)硪黄猵ython下實現(xiàn)二叉堆以及堆排序的示例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Python實現(xiàn)簡單的學(xué)生信息管理系統(tǒng)
這篇文章主要為大家詳細介紹了Python實現(xiàn)簡單的學(xué)生信息管理系統(tǒng)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
opencv resize圖片為正方形尺寸的實現(xiàn)方法
這篇文章主要介紹了opencv resize圖片為正方形尺寸的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
在CentOS上配置Nginx+Gunicorn+Python+Flask環(huán)境的教程
這篇文章主要介紹了在CentOS上配置Nginx+Gunicorn+Python+Flask環(huán)境的教程,包括安裝supervisor來管理進程的用法,整套配下來相當(dāng)實用,需要的朋友可以參考下2016-06-06