图片无法显示 base64图片无法显示 图片体积过大无法显示

图片体积过大

在vue项目中，经常使用webpack或其他打包工具，但因打包工具对图片的引入经常有大小限制，所以导致图片无法加载，一般来说，图片超过20kb就容易无法显示，此时应使用require引入方法显示图片
如果是背景图图片，可以直接使用style添加背景图片实现

<div class="nav" :style="'background-image: url(' + bgl + ');'">
</div>
export default {
  data() {
    return {
      bgl: require("../../nav.png"), //背景图
    }
  }
 }

base64图片

如果需要使用base64字符串显示图片，建议采用一下方法：

<div class="nav">
  <img class="user-img" src="{{userImg}}" alt="" v-if="showImg">
</div>
export default {
  data() {
    return {
      userImg: '', //base64图片的src链接
      showImg: false,//是否显示base64图片，一开始默认不显示
    }
  },
  mounted(){
    var imgStr="";//拿到的base64字符串
    var headImgUrl = "data:image/jpg;base64," + imgStr;
	this.userImg= headImgUrl
	//因base64字符串过长，建议延时一会，图片才可正常
	setTimeout(() => {
		this.showImg: true
	}, 300);
  }
 }