将代码移至组件文件夹后图片无法加载的问题求助

问题根源 #

你遇到的报错核心原因是文件迁移后图片相对路径未同步更新：

• 原App.js位于src/目录下，使用./assets/send.png可正确指向src/assets/send.png
• 迁移后的Signup.js在src/components/screens/目录下，仍用./assets会去src/components/screens/assets/查找文件，导致找不到资源

正确的图片导入方法 #

方法1：修正相对路径 #

直接调整Signup.js里的图片路径，匹配当前文件层级：

// Signup.js 中的图片导入代码
import sendIcon from '../../assets/send.png';

// 组件内使用示例
<Image source={sendIcon} />

方法2：配置绝对路径别名（更推荐，避免层级变动重复改路径） #

如果是React Native项目，可通过babel插件设置全局路径别名：

1. 安装依赖插件：

npm install --save-dev babel-plugin-module-resolver

2. 修改项目根目录的babel.config.js：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        alias: {
          '@assets': './src/assets',
        },
      },
    ],
  ],
};

3. 后续任意组件中都能直接用别名导入：

import sendIcon from '@assets/send.png';

验证步骤 #

修改路径后，重启项目的metro服务（React Native）或刷新页面，即可验证图片是否正常加载。

内容的提问来源于stack exchange，提问作者Code With Chriss