如果 src 无效怎么办，它不会显示错误

在网页开发中，经常使用 <img> 标签来加载图片，其中 src 属性指定了图片的路径。但是，如果路径指定错误，图片将无法加载，并且也不会显示错误信息，给我们的调试带来困难。那么，如果 src 无效，应该如何处理呢？

判断图片是否加载成功

我们可以通过 JavaScript 中的 onload 和 onerror 事件来判断图片是否加载成功。当图片加载成功时，会触发 onload 事件；当图片加载失败时，会触发 onerror 事件。因此，我们可以使用这两个事件来判断图片是否加载成功。具体代码如下所示：

<!-- html 文件 -->
<img src="/path/to/image" onload="loaded()" onerror="error()">

<!-- JavaScript 文件 -->
function loaded() {
  console.log('图片加载成功！');
}

function error() {
  console.log('图片加载失败！');
}

当图片加载成功时，会在控制台中输出 图片加载成功！；当图片加载失败时，会在控制台中输出 图片加载失败！。

备用图片

除了使用 JavaScript 判断图片是否加载成功外，还可以使用备用图片（fallback image）来处理 src 无效的情况。备用图片即在 src 属性指定的图片无法加载时，使用另一张图片来代替。具体代码如下所示：

<!-- html 文件 -->
<img src="/path/to/image" onerror="this.src='/path/to/fallback-image'">

当 src 属性指定的图片无法加载时，会自动替换为 onerror 中指定的备用图片，从而保证图片总是能够正常显示。需要注意的是，备用图片的地址也可能无效，因此建议选择一个可靠的地址作为备用图片。