处理vue直接引入图片地址时显示不出来的问题 src=“[object Module]“

最新推荐文章于 2024-06-20 17:02:19 发布

浪里个浪里个浪里个浪

最新推荐文章于 2024-06-20 17:02:19 发布

阅读量1.4k

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_24418107/article/details/133862834

版权

文章讲述了在Webpack中使用vue-loader编译模板时遇到的图片加载问题，原因在于两种模块规范冲突。解决办法是在vue.config.js中配置url-loader，设置esModule为false，确保图片引用使用commonjs语法。

摘要由CSDN通过智能技术生成

在webpack中使用vue-loader编译template之后，发现图片加载不出来了，开发人员工具中显示src=“[object Module]”

这是因为当vue-loader编译template块之后，会将所有的资源url转换为webpack模块请求

这是因为vue使用的是commonjs语法规范，而file-loader/url-loader使用的es module语法规范，解决方法是处理图片时不适用es module的语法

我们需要在vue.config.js里面稍加配置就可以了

 // 编译图片
    config.module
      .rule('images')
      .test(/\.(png|jpeg|gif|jpg)$/)
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 1024 * 10, // 小于10k的图片采用baseurl，大于和等于10k的就正常打包成图片
        name: 'static/[name].[ext]',
        esModule: false // 处理图片引用不出来的问题 
      })