图片加载失败时如何用占位图替换实际图片

你可以通过给Next.js的Image组件绑定onError事件处理函数，实现图片加载失败时自动替换为占位图，具体实现如下：

1. 首先引入useState来管理图片的源地址：

import { useState } from 'react';
import Image from 'next/image';

2. 在组件内部定义状态和错误处理函数：

// 初始图片地址为传入的image变量
const [imgSrc, setImgSrc] = useState(image);

// 图片加载失败时触发的函数
const handleImageError = () => {
  // 将图片地址替换为你的占位图路径，比如public目录下的placeholder.png
  setImgSrc('/placeholder.png');
};

3. 修改Image组件的属性，绑定onError并使用状态管理的图片地址：

<div className="bg-[#F8F8F8] flex items-center justify-center px-2 py-10">
  <Image 
    src={imgSrc} 
    alt="course image" 
    width={100} 
    height={100} 
    onError={handleImageError}
  />
</div>

补充说明 #

• 如果你的占位图是远程图片，需要在next.config.js中配置对应的domains，确保Next.js允许加载该图片资源。
• 可以在handleImageError函数中添加判断，避免重复替换占位图（比如判断当前imgSrc是否已经是占位图路径）。

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