在Vue 组件打包后标签 ‘ img src=“./assets/logo.png“ ’在前台页面的路径下显示 src=[object Module]?

在使用Vue开发并打包应用时,遇到组件内img标签引用静态资源显示src=[object Module]的问题。原因是url-loader默认导出esm,与@vue/component-compiler-utils的解析方式冲突。解决办法是在file-loader配置中设置esModule:false,避免模块化导出。此外,需将img的src改为绝对路径,并考虑网站根目录的相对路径,确保资源正确加载。此问题可能出现在url-loader或file-loader中,调整相应配置即可修复。
摘要由CSDN通过智能技术生成

组件中的原始代码:
在这里插入图片描述
打包后出现:
在这里插入图片描述

解决方案:在配置 file-loader 的时候,设置 options 中的 esModule:false 就可以了。示例代码如下:

{
   
    test: /\.(png|jpe?g|gif)$/i,
        // use: 'file-loader',
        use: [
            {
   
                loader: 'file-loader'
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值