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

ix0qys7i  于 2023-06-24  发布在  Vue.js
关注(0)|答案(3)|浏览(160)

我有一个区域,人们可以上传自己的用户图像。但如果没有,我想显示一个默认值。
在谷歌上搜索了一下之后,我发现我可以这样做,比如-

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

但是,我不知道如何创建一个方法来传递正确的(默认)图像。

2g32fytz

2g32fytz1#

我用一个计算的属性来做,像这样:

<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>
quhf5bfb

quhf5bfb2#

我建议为此创建一个组件,因为它听起来像是将在更多地方使用的东西。
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>
lpwwtiir

lpwwtiir3#

以上所有的都是不必要的复杂。以下是最简单的方法:

<img :src="image||'default.png'" />

相关问题