Rails 7中React导入图片报错：无法解析文件，求解决方案

先确认图片存放位置 #

Rails对静态资源有固定目录规范，先把图片放到正确位置：

• 推荐放在app/assets/images/目录下（比如app/assets/images/logo.png）
• 或者放在public/images/目录下（适合不需要asset pipeline处理的图片）

针对不同场景的解决方案 #

场景1：使用jsbundling（esbuild默认配置） #

Rails 7默认的jsbundling（esbuild）已配置@assets别名指向app/assets，直接用别名导入即可：

import logo from '@assets/images/logo.png';

function App() {
  return <img src={logo} alt="Logo" />;
}

如果别名不生效，检查config/esbuild.config.js是否包含以下配置：

const path = require('path');

module.exports = {
  entry: {
    application: './app/javascript/application.js'
  },
  resolve: {
    alias: {
      '@assets': path.resolve(__dirname, 'app/assets')
    }
  }
};

场景2：在ERB文件中使用JSX #

如果你的JSX文件是.jsx.erb后缀（嵌入Ruby代码），可以直接用Rails的asset helper生成正确路径，无需import：

function App() {
  return <img src="<%= image_path('logo.png') %>" alt="Logo" />;
}

场景3：图片放在public目录 #

如果图片在public/images/logo.png，直接用绝对路径引用即可，无需import：

function App() {
  return <img src="/images/logo.png" alt="Logo" />;
}

排查要点 #

• 重启开发服务器：修改资源位置或配置后，必须重启bin/dev才能生效
• 检查文件名大小写：Linux/macOS系统区分文件名大小写，确保导入路径和实际文件名完全一致
• 验证图片可访问：在浏览器直接访问http://localhost:3000/assets/logo.png（assets目录）或http://localhost:3000/images/logo.png（public目录），确认图片能正常打开

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