小图片(logo)建议转成 bese64 格式,因为转为 base64 ,浏览器访问base64字符串就不需要再次发送请求给服务器,可以直接拿到图片的数据,防止发起不必要的网络请求



大图片建议还是采用 ​​<img>​​ 标签的形式获取图片,标签的形式获取图片时,浏览器通过请求服务器来获取图片的数据。而base64则不需要再次请求,直接访问到图片的数据了



可以通过控制图片的大小来定义是否是大图片或小图片,如:超过 10MB 为大图片,没超过则为小图片,这个时候可以通过 limit 来控制了


  • 图片转 base64

    https://tool.chinaz.com/tools/imgtobase

  • 如:把 logo 上传后

    base64图片_获取图片

  • 把 base64 字符串复制到 img 标签中

    base64图片_获取图片_02

  • 浏览器访问后,可以拿到图片的数据

    base64图片_前端_03

  • 可以通过在 webpack 配置 file-loader ,使用 limit 控制图片大小哪些图片是需要转成 base64,哪些则不需要
  • 详情​