防止图像加载错误进入javascript控制台

Prevent image load errors going to the javascript console

本文关键字：javascript 控制台 错误 图像 加载      更新时间：2023-09-26

例如在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。这一切需要很长时间。我在后台这样做，并提前将S3 URL返回到浏览器，并使用一些javascript使用image.onerror回调来ping图像URL，以检测图像是否到达S3。

这一切都有效，但我收到了大量控制台错误。这有点难看。有什么办法吗隐藏这个。

很抱歉，似乎没有办法抑制这个错误，至少在谷歌Chrome中是这样。

另请参阅：检查文件是否存在，但防止控制台中的404错误显示

想分享我刚刚发现的东西。：）四处搜索也无济于事，所以我花了相当长的时间，看起来很值得！确实有一个解决方案（如果您也控制后端）

例如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（）也可以用于流式传输回退映像。

相关文章：