vuejs中compute如何判断图片引用是否为空？

Question

各位高手，我有个需求：
用户首次登陆的时候还没有上传自己的头像，所以后台服务器中没有以他ID号命名的头像图片，这时候我就想让他展示为默认图片。

<img src="srcImg" ref="imgId" name="imgId" >
以下是用户已经上传了他的头像，在服务器中以90000001.jpg保存。
computed:{
srcImg(){ return '/header_image/'+this.$cookie.get('userid')+'.jpg' },

而用户尚还没有上传头像，就如下，1.jgp就是默认公用的用户头像。
computed:{
srcImg(){ return '/header_image/1.jpg' },

我知道大概应该在computed里写一个判断，但我不懂如何判断图片为空，再如何二选一，请各位高手赐教。

Answer 1

不用那么麻烦，直接使用onerror。

<img src="{{image}}" onerror="showDefaultImage(this)" />

showDefaultImage = function (dom) {  
  dom.src = '/1.jpg';  
  dom.onerror = null;  
};

Answer 2

我一般会放一个透明 png 或者 svg 在上面，然后用默认头像作为背景。然后加载真正的图片，加载成功就替换透明占位图片。

当然，推荐在后端返回数据的时候直接写明，这样可以减少一次可能不必要的请求。

Answer 3

前端判断图片或者说一个 url 是否为空是需要发请求到后端的，基于后端返回错误码再触发 事件，所以你指望的 computed 是没法完成任务了。后端明明知道用户有没有设置头像，为什么不告诉前端呢？onerror 不是不可以，但是何必多一次请求。

给 user 上多加个字段用来保存头像的 url，为空则 fallback 到 default url，或者后端开一个 api 类似 /user/avatar/userid 的，后端来判断何时 fallback，前端正常使用这个 url 就 OK，附带的好处是前端无需关心头像实际在服务器上如何存储，不需要知道什么/header_image 文件夹名。