Material UI v5 CardMedia图片在Netlify部署后无法显示求助

问题原因 #

本地开发时，你用的相对路径./src/assets/icons-large/property_insurance.svg能被开发服务器解析，但项目构建部署后，src目录不会被包含在生产包中，导致路径失效，图片无法加载。

解决方案 #

方案1：通过ES模块导入图片资源 #

修改数据文件，直接导入图片资源，让打包工具自动处理路径：

// 导入图片资源
import propertyInsuranceIcon from './assets/icons-large/property_insurance.svg';

export const AboutUs = [
  {
    id:1,
    title:"Property Insurance",
    information:"We offer our customer property protection of liability coverage and insurance for their better life.",
    imgUrl: propertyInsuranceIcon // 使用导入的变量作为路径
  }
]

打包后图片会被输出到静态资源目录，imgUrl会自动替换为生产环境的正确路径。

方案2：将图片移至public目录 #

把图片放到项目根目录的public文件夹下（比如public/assets/icons-large/property_insurance.svg），然后修改路径为根相对路径：

export const AboutUs = [
  {
    id:1,
    title:"Property Insurance",
    information:"We offer our customer property protection of liability coverage and insurance for their better life.",
    imgUrl: "/assets/icons-large/property_insurance.svg" // 用根路径开头
  }
]

public目录下的文件会被直接复制到构建后的根目录，根相对路径能正确访问到资源。

方案3：检查Netlify构建配置 #

确保Netlify的构建命令设置正确（React项目通常为npm run build），且构建输出目录指向build文件夹，保证Netlify能正确部署静态资源。

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