关于前端项目经验---前端封装项目img模块的好处

前端封装项目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暴露出来的变量。