React中img标签src无效时如何设置默认图片？Next.js下onerror不生效如何解决

原因说明 #

你使用的原生字符串式onerror写法在JSX中不生效，是因为React的事件绑定需要使用驼峰命名的onError属性，且必须传入函数类型的值，不能直接传入可执行字符串。

可行解决方案 #

1. 基础行内实现（单处使用）

直接在img标签上绑定onError事件，同时要清空原有错误处理逻辑，避免默认图加载失败时触发死循环：

<img
  alt="Site Logo"
  src="/secondary.jpg"
  onError={(e) => {
    e.target.onerror = null;
    e.target.src = "https://static.thenounproject.com/png/140281-200.png";
  }}
/>

2. 自定义Hook复用（多处使用）

如果多个页面/组件都需要默认图能力，可以封装为自定义Hook统一复用：

// 自定义Hook
import { useState } from "react";

function useImageFallback(fallbackSrc) {
  const handleImgError = (e) => {
    e.target.onerror = null;
    e.target.src = fallbackSrc;
  };
  return { handleImgError };
}

// 组件中调用
export default function YourComponent() {
  const { handleImgError } = useImageFallback("你的默认图片地址");
  return (
    <img 
      alt="Site Logo" 
      src="/secondary.jpg" 
      onError={handleImgError} 
    />
  );
}

3. 适配Next.js内置Image组件

如果你使用Next.js官方提供的next/image组件优化图片加载，同样可以直接使用onError属性实现需求：

import Image from "next/image";

<Image
  alt="Site Logo"
  src="/secondary.jpg"
  width={200}
  height={200}
  onError={(e) => {
    e.target.onerror = null;
    e.target.src = "你的默认图片地址";
  }}
/>

内容的提问来源于stack exchange，提问作者devAR