Next.js如何全局设置主图片加载失败时默认加载的占位图片？

AI 小北

2026-9-29

全局配置方案分两种，可根据你的项目技术栈选择：

1. 全栈通用全局监听方案（无需修改现有代码）

直接在项目入口JS文件最顶部添加以下代码，一次配置所有img标签自动生效：

document.addEventListener('error', function(e) {
  if (e.target.tagName.toLowerCase() === 'img') {
    // 替换为你的默认占位图路径
    e.target.src = 'images/placeholder-image.png'
    // 禁止默认图加载失败时触发循环报错
    e.target.onerror = null
  }
// 必须开启事件捕获才能监听到img的加载错误事件
}, true)

2. 框架自定义组件方案（拓展性更强，适合长期维护）

如果你的项目是React/Vue等框架开发，也可以封装一个全局通用的图片组件，后续所有场景统一使用该组件即可：

React 实现示例

// 封装公共组件 CustomImg.jsx
export default function CustomImg({ src, alt, ...restProps }) {
  const handleImgError = (e) => {
    e.target.src = 'images/placeholder-image.png'
    e.target.onerror = null
  }
  return <img src={src} alt={alt || ''} onError={handleImgError} {...restProps} />
}

// 业务代码中直接使用，无需额外配置错误逻辑
// <CustomImg src="你的图片地址" />

Vue 实现示例

<!-- 封装公共组件 CustomImg.vue -->
<template>
  <img :src="src" v-bind="$attrs" @error="handleImgError" />
</template>
<script setup>
const props = defineProps(['src'])
const handleImgError = (e) => {
  e.target.src = 'images/placeholder-image.png'
  e.target.onerror = null
}
</script>

// 全局注册组件后，所有业务文件直接调用即可
// <CustomImg src="你的图片地址" />