防止图片加载错误出现在JavaScript控制台中

Question

例如在 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通过图像的onerror回调来检测图像是否已到达S3。

它都能正常工作，但我得到了很多控制台错误。这有点丑陋。有没有办法隐藏这个错误？

- bradgonesurfing

Answer 1

很抱歉，在Google Chrome中似乎没有办法抑制这个错误。

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

- Simon Sarris

Answer 2

我想分享一下我刚刚发现的内容。 :) 在谷歌搜索并没有找到答案，所以我花了很长时间去寻找，但看起来这是值得的！确实有一个解决方案（如果你也控制后端）

例如在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()也可用于流回备用图像。

- ShQ

---

这是一个非常糟糕的hack...在很多层面上都是如此...我宁愿处理控制台错误而不是神奇的响应...如果你控制后端，只需返回没有内容的200或201就方便多了。 - Piotr Kula

我宁愿处理控制台错误，也不想要神奇的响应 - 当然，如果您不喜欢它，请不要使用它。问题是：“有没有办法隐藏这个？”答案是肯定的，有的。如果问题是：“有没有适当的方法来隐藏这个？”那么答案很可能是否定的，就像Simon所指出的那样。 - ShQ