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的格式
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)