当前位置: 首页 > news >正文

08 —— Webpack打包图片

【资源模块 | webpack 中文文档 | webpack中文文档 | webpack中文网】https://www.webpackjs.com/guides/asset-modules/?sid_for_share=99125_3


Webpack打包图片以8KB为临界值判断

  • 大于8KB的文件:发送一个单独的文件并导出URL地址

  • 小于8KB的文件:导出一个dataURI(base64字符串)

打包到js文件里


filename:输出到assets下的文件名

test:/\.(png|jpg|gif)$/i,匹配以这些类型结尾的文件


小图

js中引入本地图片资源要用import方式(如果是网络图片,直接写字符串即可)

给src属性赋予图片的地址

加在.login-wrap容器的末尾

appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点


大图

小图 

http://www.lryc.cn/news/490538.html

相关文章:

  • 01.Django快速入门
  • 【大数据学习 | Spark-Core】spark-shell开发
  • Modern Effective C++ Item 14 如果函数不抛出异常请使用noexcept
  • cudatoolkit安装(nvcc -V错误版本解决)
  • DTO和VO的区别及使用场景详解
  • 百度在下一盘大棋
  • 第十六届蓝桥杯模拟赛第二期题解—Java
  • 驱动开发笔记:关于3588GPIO
  • 【RK3588 Linux 5.x 内核编程】-内核线程与Mutex
  • 【0342】分配并初始化 Proc Signal 共享内存 (1)
  • 管家婆财贸ERP BR035.回款利润明细表
  • 数据库MYSQL——表的设计
  • netstat -tuln | grep 27017(显示所有监听状态的 TCP 和 UDP 端口,并且以数字形式显示地址和端口号)
  • 非线性控制器设计原理
  • MySQL数据库6——SQL优化
  • IDEA配置本地maven
  • 学习日记_20241123_聚类方法(高斯混合模型)续
  • SpringMVC——简介及入门
  • 文件操作完成后,为什么要关闭文件
  • vue3+echarts+ant design vue实现进度环形图
  • 使用argo workflow 实现springboot 项目的CI、CD
  • C++知识点总结(58):序列型动态规划
  • go interface(接口)使用
  • 【docker】docker commit 命令 将当前容器的状态保存为一个新的镜像
  • 使用 Java 中的 `String.format` 方法格式化字符串
  • 图论最短路(floyed+ford)
  • BERT的中文问答系统39
  • 从 Mac 远程控制 Windows:一站式配置与实践指南20241123
  • 【Linux学习】【Ubuntu入门】1-5 ubuntu软件安装
  • 如何自动下载和更新冰狐智能辅助?