webpack:url-loader打包img后src为[object Module]

简介: webpack:url-loader打包img后src为[object Module]

引入图片的方式

<!-- 相对路径引入 -->
<img src="./logo.jpg" alt="">
<!-- 绝对路径引入 -->
<img src="@/assets/logo.jpg" alt="">
<!-- 引入static文件, 不会处理 -->
<img src="/static/logo.jpg" alt="">

webapck 配置文件

{
  test: /\.(jpg|png|gif|jpeg|woff|ttf)$/,
   use: [
     {
       loader: 'url-loader',
       options: {
         esModule: false, // 这里设置为false
         // 如果图片大小小于这个值,就会被打包为base64格式
         limit: 10 * 1000, // 10 kb
         name: 'img/[name].[hash].[ext]',
       },
     },
   ],
 },

遇到的问题

打包产物中出现了[object Module]

<img src="[object Module]" alt="">

原因是新版本的file-loader选项esModule默认为true ,需要将其设置为false


参考

webpack打包html里面img后src为“[object Module]”问题

相关文章
|
JSON 前端开发 JavaScript
Webpack5新特性:使用 Assets Module 处理图片和字体资源
本文介绍了 Webpack5 的 Assets Module ,是其内置的用来处理图片字体文件等资源模块的新功能。相比与过去通过 loader 的方式去处理,更加方便和简洁。
1587 0
|
资源调度 分布式计算 Kubernetes
Flink最全的集群部署攻略(推荐yarn实现企业级部署)
🍅程序员小王的博客:程序员小王的博客 🍅 欢迎点赞 👍 收藏 ⭐留言 📝 🍅 如有编辑错误联系作者,如果有比较好的文章欢迎分享给我,我会取其精华去其糟粕
11902 3
Flink最全的集群部署攻略(推荐yarn实现企业级部署)
|
新零售 数据可视化 小程序
阿里云模板建站怎么样 ,阿里云模板建站有什么好处和优点?
阿里云模板自助建站,又称为阿里云速成美站。不需要有网站建设知识,就可以快速建立一个网站。
2030 0
|
3天前
|
云安全 人工智能 自然语言处理
|
7天前
|
人工智能 Java API
Java 正式进入 Agentic AI 时代:Spring AI Alibaba 1.1 发布背后的技术演进
Spring AI Alibaba 1.1 正式发布,提供极简方式构建企业级AI智能体。基于ReactAgent核心,支持多智能体协作、上下文工程与生产级管控,助力开发者快速打造可靠、可扩展的智能应用。
716 17
|
10天前
|
数据采集 人工智能 自然语言处理
Meta SAM3开源:让图像分割,听懂你的话
Meta发布并开源SAM 3,首个支持文本或视觉提示的统一图像视频分割模型,可精准分割“红色条纹伞”等开放词汇概念,覆盖400万独特概念,性能达人类水平75%–80%,推动视觉分割新突破。
750 57
Meta SAM3开源:让图像分割,听懂你的话
|
8天前
|
搜索推荐 编译器 Linux
一个可用于企业开发及通用跨平台的Makefile文件
一款适用于企业级开发的通用跨平台Makefile,支持C/C++混合编译、多目标输出(可执行文件、静态/动态库)、Release/Debug版本管理。配置简洁,仅需修改带`MF_CONFIGURE_`前缀的变量,支持脚本化配置与子Makefile管理,具备完善日志、错误提示和跨平台兼容性,附详细文档与示例,便于学习与集成。
329 116