django使用图片延时加载引起后台404错误


Posted in Python onApril 18, 2017

环境 django 1.10.6

缘起

今天接到一个任务——解决终端满屏日志中的无用错误。 django 会尽可能给你准确报出错误位置,但是一些复杂,深层次的错误它自带的错误日志有些不足了,日志多但是却无效。

过程

对于后台日志太多而无用,我则直接转到浏览器查看控制台访问情况,得到如下提示

django使用图片延时加载引起后台404错误

直接去后台匹配这个错误:undefined。根据这个错误完全定位不到具体哪儿出了问题。我调试跟踪发现进入到一个特定的页面会一定出现这个问题,而如果换一个页面则不出现错误。 得此,我进而对这个页面进行跟踪,我尝试替换页面的做法,最终定位到一段 html 代码就会引起该错误:

<img src="/static/msite/image/qrcode_for_gh.jpg">

我很诧异一个img标签会引起后端访问一个错误的地址,但是却完全不知道原因。 我尝试替换这个img的src,结果依然还是相同错误。

在用firebug调试下发现问题,上图:

django使用图片延时加载引起后台404错误

根据调用堆栈的提示,去追寻相关js如下图

django使用图片延时加载引起后台404错误

最终才知道这个图片地址被惰性加载了,然后在惰性加载后,img的src变成 undefined引发后端访问一个不存在的地址。

解决

在使用前,处理一下 src 值

function imageLoaded(obj, src) {
 var img = new Image();
 if(src===undefined){
  src='';
 }
 img.onload = function() {
  obj.src = src;
 };
 img.src = src;
}
Python 相关文章推荐
跟老齐学Python之做一个小游戏
Sep 28 Python
Python基于pygame实现的弹力球效果(附源码)
Nov 11 Python
python轻松查到删除自己的微信好友
Jan 10 Python
Django添加favicon.ico图标的示例代码
Aug 07 Python
解决在pycharm中显示额外的 figure 窗口问题
Jan 15 Python
如何用Python做一个微信机器人自动拉群
Jul 03 Python
详解python中各种文件打开模式
Jan 19 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
Apr 02 Python
Python如何把十进制数转换成ip地址
May 25 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
Jun 11 Python
Python3压缩和解压缩实现代码
Mar 01 Python
基于PyTorch中view的用法说明
Mar 03 Python
使用Python3制作TCP端口扫描器
Apr 17 #Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
Apr 17 #Python
Python的时间模块datetime详解
Apr 17 #Python
Python中标准模块importlib详解
Apr 16 #Python
Python 实现随机数详解及实例代码
Apr 15 #Python
Python 列表(List) 的三种遍历方法实例 详解
Apr 15 #Python
Python生成随机数组的方法小结
Apr 15 #Python
You might like
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
使用pm2自动化部署node项目的方法步骤
2019/01/28 Javascript
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
vue-test-utils初使用详解
2019/05/23 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
python模块smtplib学习
2018/05/22 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
python实现Virginia无密钥解密
2019/03/20 Python
python语言元素知识点详解
2019/05/15 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
2015年车间管理工作总结
2015/07/23 职场文书
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python
node快速搭建后台的实现步骤
2022/02/18 NodeJs
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS