webpack传递props时img src无法解析，require引入图片报找不到模块如何解决

你遇到的问题是两个原因导致的：

1. webpack 配置的 resolve.extensions 仅包含了 js/jsx 后缀，没有覆盖图片格式，require 图片的时候无法匹配到文件
2. 直接在数组中写带 @ 别名的字符串路径，webpack 不会自动解析别名，必须通过 require 导入才能触发别名解析

解决步骤 #

• 第一步：修改 webpack/webpack.base.js 中的 resolve.extensions 配置，补充图片后缀：

module.exports = {
  // 其余配置保持不变
  resolve: {
    alias: {
      "@": utils.resolve("src")
    },
    // 新增图片格式后缀
    extensions: ["*", ".js", ".jsx", ".png", ".jpg", ".jpeg", ".gif", ".svg"]
  },
  // 其余配置保持不变
}

• 第二步：调整图片路径导入方式
  可以直接在 App.js 中定义数组时用 require 包裹路径：

const articles = [
  {
    id: 1,
    title: "Title",
    image: require("@/assets/images/pages/home/blogs-image-01.png")
  }
];

如果不想提前在数组里写 require，也可以在 slick-carousel.js 渲染图片的时候动态导入：

<img src={require(`${item.image}`)} alt={item.title} />

• 第三步：校验文件路径
  检查项目目录下是否真实存在 src/assets/images/pages/home/blogs-image-01.png 文件，注意文件名大小写和路径层级是否和引用内容一致（webpack 对路径大小写敏感）。

修改完成后重启 webpack 开发服务即可解决报错，图片也会正常解析加载。

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