使用Webpacker解析Rails图片URL时遇模块找不到错误求助

咱们先定位错误根源：你碰到的Module not found错误，本质是Webpack没在指定路径下找到logo.jpg文件。结合你的webpacker.yml配置和导入代码，咱们一步步来修复：

1. 先确认图片的实际位置 #

先核对你的logo.jpg存放路径：

• 如果它在app/assets/images目录下（对应你配置里的resolved_paths），那你当前用的相对路径../logo.jpg是错误的——你的组件在app/javascript/components，../会指向app/javascript目录，而非app/assets/images。
• 如果它在app/javascript的子目录（比如app/javascript/images），那这个目录没被加入resolved_paths，Webpack自然找不到它。

2. 修正导入路径 #

根据图片位置调整导入方式：

情况一：图片在app/assets/images #

你已经把app/assets/images加到了resolved_paths，Webpack会自动扫描这个目录，直接用文件名导入即可：

import logo from 'logo.jpg';

导入后，logo变量就是编译后带哈希值的完整URL，直接在组件里使用就行，比如React组件中：

<img src={logo} alt="Logo" />

情况二：图片在app/javascript的子目录（比如app/javascript/images） #

先修改webpacker.yml，把这个目录加入resolved_paths：

resolved_paths: ['app/assets/images', 'app/javascript/images']

之后可以直接用文件名导入，或者用明确的相对路径：

// 图片在app/javascript/images，组件在app/javascript/components时
import logo from '../images/logo.jpg';

3. 确保配置生效 #

修改webpacker.yml后，一定要重启bin/webpack-dev-server——你的配置文件注释里也提到了，配置变更必须重启服务才能生效。

额外提示：获取带哈希URL的其他方式 #

如果需要在Rails视图里直接引用Webpacker处理后的图片，也可以用image_pack_tag助手方法：

<%= image_pack_tag 'logo.jpg' %>

它会自动输出带哈希值的图片URL。

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