将“默认”图像添加到我的 <img> (VUE)

Question

我有一个区域供人们上传他们自己的用户图像。但如果他们不这样做，我想显示一个默认的。

经过一番谷歌搜索，我发现我可以通过执行以下操作来做到这一点 -

<img :src="creatorImage" @error="defaultAvatar">

但是，我不确定如何创建一个方法来将正确的（默认）图像传递给它。

Answer 1

我是用一个计算属性来做的，像这样：

<template>
  <img :src="creatorImage" @error="imageError = true"/>
</template>

<script>
...
data() {
  return {
      imageError: false,
      defaultImage: require("@/assets/imgs/default.jpg")
  };
},
computed: {
    creatorImage() {
        return this.imageError ? this.defaultImage : "creator-image.jpg";
    }
}
...
</script>

Answer 2

我建议为此创建一个组件，因为这听起来像是将在更多地方使用的东西。

JsFiddle example

组件

 Vue.component('img-with-default', {     
  props: ['defaultImg'],
  data: function () {
    return {
      defaultAvatar: this.defaultImg || 'https://cdn0.iconfinder.com/data/icons/crime-protection-people/110/Ninja-128.png'
    }
  },
  computed:{
    userImage: function() {
      if(this.uploadedImg != null) {
        return this.uploadedImg;
      } else {
        return this.defaultAvatar;
      }
    }
  },
  template: '<img :src="userImage">'
})

使用组件将是

HTML

<div id="editor">
  <img-with-default></img-with-default>

  <img-with-default default-img="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-128.png" ></img-with-default>
</div>

JS

new Vue({
  el: '#editor'  
})

这样你就有了默认图片。

---

如果您愿意，您可以创建一个显示传递的 img src 或默认的组件。

组件

Vue.component('img-with-default', {     
  props: ['imgSrc'],
  data: function () {
    return {
      imageSource: this.imgSrc || 'https://cdn0.iconfinder.com/data/icons/crime-protection-people/110/Ninja-128.png'
    }
  },
  template: '<img :src="imageSource">'
})

并使用它

HTML

<div id="editor">
  <img-with-default></img-with-default>

  <img-with-default img-src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-128.png" ></img-with-default>
</div>