React项目导入图片无报错但无法正常显示问题求助

• 处理require引入资源的返回值问题
  新版Create React App、Webpack5等环境中，require()引入静态资源时会返回一个包含default属性的对象，而非直接返回资源路径，你需要修改Data.js中的img字段为：

  img: require("../../../images/svg-1.svg").default,
  

  你也可以改用ES模块导入的写法避免该问题：

  import svg1 from "../../../images/svg-1.svg";
  export const homeObjOne = {
    id: "about",
    img: svg1,
    // 其余属性保持不变
  }
  

• 校验文件路径合法性
  先确认相对路径是否匹配文件实际位置：以Data.js所在目录为基准，向上回溯三级后是否存在images/svg-1.svg文件。你可以先将测试图片放在public目录下，用绝对路径写法验证是否是路径问题：

  img: "/images/svg-1.svg" // 对应public/images/svg-1.svg的路径
  

• 排查样式导致的显示异常
  你当前使用的Img是自定义的styled组件，可先替换为原生img标签加固定宽高测试：

  <img src={img} alt={alt} style={{width: '300px', height: '300px'}} />
  

  如果原生标签可以正常显示，说明是Img或父元素ImgWrap的样式问题，检查是否设置了width: 0、height: 0、display: none、opacity: 0等属性。
• 验证资源文件本身有效性
  直接在浏览器中打开svg文件确认文件本身可以正常渲染，也可以替换为jpg、png等其他格式的图片测试，排除svg文件本身的语法错误、宽高配置错误问题。
• 检查组件参数传递
  首先确认InfoSection组件的props解构是否包含alt字段，你提供的代码中未在解构列表里看到alt参数；其次确认调用InfoSection组件时，是否正确将homeObjOne的所有属性传递给组件，调用方式应类似：

  <InfoSection {...homeObjOne} />
  

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