如何在Material UI的CardMedia组件中处理图片占位符？

你可以通过绑定onError事件实现图片加载失败时切换到备用图，具体实现如下：

方案一：基于React状态管理的动态切换 #

通过useState管理图片地址，加载失败时替换为备用图路径：

import { useState } from 'react';
import CardMedia from '@mui/material/CardMedia';

function YourCardComponent({ size, source }) {
  // 初始图片地址
  const [imageSrc, setImageSrc] = useState('/src/assets/icons/dLSjQE.jpg');
  // 替换为你的实际占位图路径
  const fallbackImage = '/src/assets/icons/placeholder.jpg';

  const handleImageError = () => {
    setImageSrc(fallbackImage);
  };

  return (
    <CardMedia
      component="img"
      height={size}
      image={imageSrc}
      alt={`${source} cover`}
      onError={handleImageError}
    />
  );
}

方案二：直接修改DOM元素（无状态） #

如果场景简单，也可以直接在onError事件中修改图片元素的src属性，无需额外状态：

import CardMedia from '@mui/material/CardMedia';

function YourCardComponent({ size, source }) {
  const handleImageError = (e) => {
    e.target.src = '/src/assets/icons/placeholder.jpg';
  };

  return (
    <CardMedia
      component="img"
      height={size}
      image={'/src/assets/icons/dLSjQE.jpg'}
      alt={`${source} cover`}
      onError={handleImageError}
    />
  );
}

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