Django后台因图片懒加载引发404错误的排查与解决

运行环境为Django 1.10.6。

问题背景

本次任务旨在清理终端中满屏的无用报错日志。虽然Django通常会准确定位错误位置，但在处理某些复杂且深层的问题时，其内置的错误日志往往显得力不从心，日志数量庞大却缺乏实际参考价值。

排查过程

面对后台日志过多且无用的情况，我转而通过浏览器控制台查看实际的访问请求，发现如下提示信息。

直接在后台日志中匹配该错误，显示为undefined。仅凭此错误信息完全无法定位具体出错位置。经过调试跟踪，我发现进入特定页面时必定出现此问题，而切换至其他页面则正常。基于此现象，我对该页面进行深入跟踪，通过尝试替换页面代码，最终锁定到一段特定的HTML代码会引发该错误。

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

令我感到诧异的是，一个普通的img标签竟然会导致后端访问一个错误的地址，且当时完全不清楚具体原因。我尝试修改该img标签的src属性值，但错误依旧存在。

使用Firebug进行调试后发现问题所在，如下图所示。

根据调用堆栈的提示，进一步追踪相关的JavaScript代码，如下图所示。

最终查明，该图片地址被启用了懒加载机制。在懒加载执行后，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;
}