webpack 打包 设置小图片自动转换base64图

复制代码
1.<img src='./logo.jpg'>
执行过程:浏览器发起请求获取标签----》随后再次发起请求获取图片的位置---》渲染到页面
2..<img src = 'data:image/jpg;base64,/9j/4a'>
这个执行过程:浏览器发起请求可以直接获取到图片的地址,并渲染到页面

总结: base64的格式,优点:要访问效率要高一些
                               缺点:转换为base64格式图片会变大(小图片适合这种方式)

  // 下面操作就是设置小图自动转换base64格式的的方法
index.js 文件
import logo from  './img/logo.jpg

//利用DOM语句给src赋值
$('.box').attr('src',logo)

 module:{
      rules:[
//如果需要调用loader只有一个,则只传递一个字符串也行,如果有多个loader,则必须指定数组
// 配置url-loader 的时候,多个参数之间,使用&符号进行分隔
//这里的 outputPath=images 指定的目录会在webpack-dev-server会在哪个指定的目录,
//默认是dist目录里生成一个images {test:
/\.jpg|png|gif$/,use:'url-loader?limit=470&outputPath=images'},]} //limit=470;意思是limit的图片小于或等于470的图片会转换为base64的格式
复制代码

 

posted @   嘉琦  阅读(1184)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示