React Native 疑难排查：图片渲染问题求助

• 检查图片路径是否正确

  • 本地项目内静态资源：若图片在public文件夹下，直接用根路径写法，比如<img src="/logo.png" alt="logo" />；若在src目录下，必须先导入再使用：

    import ProfilePic from './assets/profile.png';
    <img src={ProfilePic} alt="用户头像" />
    

  • 注意相对路径层级，父组件引用子文件夹的图片，要写对./subfolder/image.svg这种格式，别漏了开头的./

• 确认构建工具配置

  • 用Create React App的话，默认支持PNG/SVG，不用额外配置；如果是自定义webpack配置，必须添加对应资源规则：

    // webpack.config.js 示例配置
    module.exports = {
      module: {
        rules: [
          {
            test: /\.(png|svg|jpg|jpeg|gif)$/i,
            type: 'asset/resource',
          },
        ],
      },
    };
    

  • Vite项目默认支持这些格式，要是改过配置，检查vite.config.js里的assetsInclude是否包含'*.svg'和'*.png'

• 排查SVG文件语法问题

  • 有些SVG可能存在未闭合标签、特殊字符未转义等无效XML语法，用编辑器的语法检查功能或者直接在浏览器打开SVG文件，看是否能正常渲染，修复错误后再导入

• 验证文件完整性与权限

  • 确认图片文件确实存在于指定路径，且当前用户有读取权限
  • 重新下载或复制图片文件，排除文件损坏导致的加载失败

• 修正组件写法错误

  • 别直接把相对路径字符串写死在src属性里（除非图片在public文件夹），错误示例：

    // 错误写法，src不会被构建工具解析
    <img src="./assets/icon.svg" alt="图标" />
    

  • 非public目录的图片必须通过导入变量的方式引用

• 排查第三方库冲突

  • 如果用了styled-components或图片处理类库，暂时移除这些依赖测试，看是否还报错，逐步定位冲突来源

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