Background 404 error caused by image lazy loading


Environment Django 1.10.6


Today, I received a task to solve the useless errors in the full screen log of the terminal. Django will report the error location to you as accurately as possible, but there are some complex and deep-seated errors. Its own error log is some insufficient, but the log is invalid.


For the background log is too much and useless, I directly go to the browser to check the console access, and get the following prompt

Background 404 error caused by image lazy loading

Go directly to the background to match the error: undefined. According to this error, we can’t locate the specific problem. I debug the trace and found that entering a specific page will definitely cause this problem, and if you change a page, there will be no error. Therefore, I will track this page. I try to replace the page, and finally locate a piece of HTML code, which will cause this error


I’m surprised that an img tag causes the backend to access an incorrect address, but I don’t know why. I tried to replace the SRC of this img, and the result is still the same error.

After debugging with firebug, problems are found

Background 404 error caused by image lazy loading

According to the prompt of the call stack, trace the relevant JS, as shown in the following figure

Background 404 error caused by image lazy loading

Finally, it is known that the image address has been lazily loaded. After the lazy loading, the SRC of img becomes undefined, causing the back-end to access a nonexistent address.


Before you use it, deal with the SRC value

function imageLoaded(obj, src) {
    var img = new Image();
    img.onload = function() {
        obj.src = src;
    img.src = src;

Recommended Today

Array of algorithms — sum of three numbers

Sum of three numbers difficultysecondary Here is an array of N integersnums, judgmentnumsAre there three elements a, B, C in a such that a + B + C = 0? Please find all triples that satisfy the condition and do not careful:The answer cannot contain duplicate triples. Example:Given array nums = [- 1, 0, […]