如何解决从模拟数据库导入图片时出现的Error: Cannot find module './img1.jpg'错误

我来帮你搞定这个图片加载的坑！你遇到的Error: Cannot find module './img1.jpg'，本质是因为Webpack这类打包工具在编译时需要静态确定资源路径，而你用baseUrl+el.img这种动态拼接的字符串传给require()，Webpack没法在编译阶段解析这个变量对应的实际文件路径，自然就找不到模块了。

下面给你几个可行的解决方案，根据你的项目结构选就行：

方案1：把图片放在public目录下，直接引用绝对路径 #

如果你的图片是放在项目根目录的public文件夹里（比如public/img1.jpg），那完全不需要用require()，直接用绝对路径引用就好：

修改图片组件的代码：

const { el } = props;
// public目录下的资源会直接部署到服务器根目录，用/开头的路径即可
return(
 <div className="card">
 <div className="imgBx">
 <img src={`/${el.img}`} alt={el.name} /> {/* 给alt加个有意义的内容更友好 */}
 </div>

这种方式最简单，适合不需要Webpack处理的静态资源。

方案2：提前导入图片到模拟数据库 #

如果图片是放在src目录下（比如src/images/img1.jpg），可以先把图片导入到数据库文件里，再直接传递给组件：

修改模拟数据库代码：

// 先导入图片文件，路径根据你的实际位置调整
import img1 from './images/img1.jpg';

const products=[{
 name:"PRODUCT1",
 price:500,
 rating:3,
 img:img1 // 直接用导入后的变量
 },
]
export function Productss() {
 return products
}

然后图片组件里直接用src={el.img}即可，不用再做拼接和require：

const { el } = props;
return(
 <div className="card">
 <div className="imgBx">
 <img src={el.img} alt={el.name} />
 </div>

这种方式是React中加载静态资源的标准做法，Webpack会正确处理图片的打包和路径替换。

方案3：用require.context批量动态加载图片 #

如果你有大量图片需要动态加载，不想一个个导入，可以用Webpack提供的require.context来批量读取目录下的图片：

在图片组件里添加上下文：

// 创建一个上下文，读取当前目录下的所有jpg图片，路径根据实际情况调整
const imageContext = require.context('./', false, /\.jpg$/);
const { el } = props;
const imgPath = el.img;

// 用上下文获取图片模块
return(
 <div className="card">
 <div className="imgBx">
 <img src={imageContext(`./${imgPath}`)} alt={el.name} />
 </div>

require.context的三个参数分别是：

• 第一个：要读取的目录（这里./表示组件所在目录）
• 第二个：是否递归读取子目录（false表示只看当前目录）
• 第三个：匹配文件的正则表达式（这里匹配所有jpg文件）

额外检查点 #

最后别忘了确认这几点：

• 图片文件的实际路径和你代码里的路径一致，有没有拼写错误
• 文件名大小写是否正确（比如Linux/macOS系统对文件名大小写敏感，Img1.jpg和img1.jpg是两个不同的文件）
• 如果用方案2，导入图片的路径要和数据库文件的位置对应

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