前端封装项目img模块
一、前言
在我们项目开发的时候,会用到许多icon、img 图片等
当我们打包项目的时候,如果项目性能加载图片卡顿、迟缓、那么就可能需要用到CDN 图片静态资源托管.
此时我们的项目已经完成,图片数量庞大,再去修改img的src路径便是一个巨大的任务工程。
且项目以后维护也会有很多相应问题
所以引入img模块化来应对该问题。
二、起步
-
创建 img.js 文件
import p1 from "../assets/5.png" let imgBaseurl = "http://localhost:8080/" //imgBaseurl 是CDN 图片静态资源托管的baseurl export default ={ cart:imgBaseurl+'/1.png', shoes:imgBaseurl+'/2.png', haha:imgBaseurl+'/3.png', sacc:imgBaseurl+'/4.png', p1, }
-
background-image 当图片很小、几乎不影响产品性能时,把图片放在assets目录直接使用。其他情况都把图片放在public目录中
-
在项目中引入img文件 使用img暴露出来的变量。