django使用圖片延時加載引起后臺404錯誤
環(huán)境 django 1.10.6
緣起
今天接到一個任務(wù)——解決終端滿屏日志中的無用錯誤。 django 會盡可能給你準(zhǔn)確報出錯誤位置,但是一些復(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)文章
Python趣味挑戰(zhàn)之用pygame實現(xiàn)簡單的金幣旋轉(zhuǎn)效果
今天教大家怎么用pygame實現(xiàn)簡單的金幣旋轉(zhuǎn)效果,文中有非常詳細的代碼示例,對正在學(xué)習(xí)python的小伙伴們很有幫助,需要的朋友可以參考下2021-05-05對Python中DataFrame選擇某列值為XX的行實例詳解
今天小編就為大家分享一篇對Python中DataFrame選擇某列值為XX的行實例詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-01-01python Django編寫接口并用Jmeter測試的方法
這篇文章主要介紹了python Django編寫接口并用Jmeter測試,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07如何用python多次調(diào)用exe文件運行不同的結(jié)果
有個C++項目是讀取配置參數(shù)文件并打印對應(yīng)的結(jié)果,后來需要多次修改配置文件并運行,于是想到寫個python腳本執(zhí)行這一過程,今天通過本文給大家分享python多次調(diào)用exe文件運行不同的結(jié)果,感興趣的朋友一起看看吧2023-05-05使用虛擬環(huán)境打包python為exe 文件的方法
這篇文章主要介紹了關(guān)于使用虛擬環(huán)境打包python為exe 文件的方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08Python人工智能之路 之PyAudio 實現(xiàn)錄音 自動化交互實現(xiàn)問答
關(guān)于音頻, PyAudio 這個庫, 可以實現(xiàn)開啟麥克風(fēng)錄音, 可以播放音頻文件等等。文章介紹了如何使用Python第三方庫PyAudio進行麥克風(fēng)錄音然后自動播放已經(jīng)合成的語音實現(xiàn)語音交互回答,需要的朋友可以參考下2019-08-08