evitar errores de carga de la imagen que van a la consola de JavaScript

Question

Por ejemplo en javascript

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

he intentado

e.preventDefault() 
return false 

pero el error sigue registrados en la consola. Quizás esto no sea tan malo, pero lo que estoy haciendo es subir archivos al servidor y luego procesarlos y cargar los artefactos a S3. Todo esto lleva mucho tiempo. Hago esto en segundo plano y devuelvo las URL de S3 al navegador con anticipación y uso javascript para hacer ping a las URL de la imagen utilizando la devolución de llamada de image.onerror para detectar si la imagen se ha recibido en S3 o no.

Todo funciona, pero recibo una carga de errores de consola. Esto es un poco feo ¿Hay alguna manera de para ocultar esto.

Answer 1

Lo sentimos, aparentemente no hay forma de suprimir ese error, al menos en Google Chrome.

Consulte también: Check if file exists but prevent 404 error in console from showing up

Answer 2

Pensado para compartir lo que acabo de descubrir. :) Buscar en Google no ayudó, ¡así que he pasado bastante tiempo y parece que vale la pena! En efecto, existe una única solución (si controlas el backend demasiado)

Por ejemplo, en 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(); 
    } 

}; 

Entonces se le puede llamar como:

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

X-Estado es sólo Se agregó un encabezado personalizado para que pueda detectar en el lado del cliente que la respuesta se sobrescribió.

Nota: res.end() también se puede utilizar para reproducir una imagen de reserva.