Предотвращение ошибок загрузки изображений на консоль javascript

Например, в javascript

var image = new Image();
image.onerror = function(e) {
    // handle error my way
}
image.src = "http://bad.location.com/img.jp"

Я пробовал

e.preventDefault()
return false

но ошибка все равно записывается на консоль. Возможно, это не так уж плохо, но то, что я делаю, это загрузка файлов на сервер, а затем обработка их и загрузка артефактов на S3. Все это занимает много времени. Я делаю это в фоновом режиме и возвращаю URL-адрес S3 в браузер раньше и использую некоторый javascript для пинга URL-адресов изображений, используя обратный вызов image.onerror, чтобы определить, появилось ли изображение на S3 или нет.

Все работает, но я получаю нагрузку на консольные ошибки. Это немного уродливо. Там в любом случае чтобы скрыть это.

Ответы

Ответ 2

Мысль поделиться тем, что я только что обнаружил.:) Googling вокруг не помогло, поэтому я потратил довольно много времени и, похоже, стоит того! Существует действительно одно решение (, если вы также управляете бэкэндом)

Например, в nodejs:

 /*
 * Custom 404 middleware to handle missing image for certain routes
 */

const path = require ( 'path' );
const fs = require ( 'fs-extra' );

// @root - root folder
// @exclude - exclude folder
module.exports = ( root, exclude ) => ( req, res, next ) => {

    if ( req.originalUrl.match ( exclude ) ) {
        fs.stat ( path.join ( root, req.originalUrl ), function ( err, stat ) {

            if ( err === null ) {

                // if file exist call next = fallback to static handler
                next ();

            } else {

                // if file does not exist, return a fake 200 img response
                res.writeHead ( 200, {
                    'Content-Type'  : 'image/png',
                    'Content-Length': 0,
                    'Cache-Control' : 'public, max-age=0',
                    'X-Status'      : '404'
                } );

                return res.end ();
            }
        } );
    } else {
        next ();
    }

};

Затем вы можете вызвать его так:

let static_path = path.join ( __dirname, 'public' );
app.use ( require ( './middleware/missing-image' ) ( static_path, 'img/path' ) );
app.use ( express.static ( static_path ) );

X-Status - это просто добавленный пользовательский заголовок, поэтому вы можете обнаружить на стороне клиента JS, что ответ был перезаписан.

Примечание: res.end() может использоваться для потоковой передачи обратного изображения.