Laravel+Vue项目中Vue组件引用本地图片返回404 [object%20Module]错误

根因 #

你当前使用的webpack版本（Laravel Mix 6+对应的webpack 5默认配置）处理图片静态资源时，默认启用了ES模块导出规则。你直接通过require()引入图片拿到的是完整的模块对象，而非模块内默认导出的图片路径，赋值给src属性时对象被转为字符串[object Module]，才会出现对应404错误。
你贴出的编译后代码也能验证这点：图片资源被包裹为带default导出的ES模块，而你代码里直接把__webpack_require__的返回值（即整个模块对象）赋值给了src属性。

可用解决方案 #

方案1：修改组件内引用方式（临时快速修复） #

将静态src改为动态绑定，调用require后取default属性值：

<img
        :src="require('../assets/images/bankje256x256.png').default"
        width="80"
        height="80"
        class="ttr"
        @click.prevent="addBankje"
      />

也可以提前import导入图片再绑定：

<script>
import bankjeImg from '../assets/images/bankje256x256.png'
export default {
  data() {
    return {
      bankjeImg
    }
  }
}
</script>
<template>
  <img
        :src="bankjeImg"
        width="80"
        height="80"
        class="ttr"
        @click.prevent="addBankje"
      />
</template>

方案2：修改Laravel Mix配置（全局统一修复） #

在项目根目录的webpack.mix.js中添加规则，关闭图片资源的ES模块导出，后续require直接返回路径无需加.default：

mix.override(config => {
  config.module.rules.forEach(rule => {
    // 匹配处理图片的规则
    if (rule.test.toString().match(/png|jpe?g|gif|svg/)) {
      rule.options ??= {}
      rule.options.esModule = false
    }
  })
})

修改后重新执行npm run dev编译即可生效。

方案3：直接引用public目录下的静态资源 #

你已经把同名图片放到了public/images目录下，无需走webpack资源打包，直接写绝对路径即可：

<img
        src="/images/bankje256x256.png"
        width="80"
        height="80"
        class="ttr"
        @click.prevent="addBankje"
      />

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