添加“默认"图像到我的 <img>(VUE) [英] Adding a &quot;Default&quot; image to my &lt;img&gt; (VUE)

问题描述

我有一个区域，人们可以在其中上传自己的用户图像.但如果他们不这样做，我想显示一个默认的.

I have an area where people can upload their own user-image. But if they do not, I would like to display a default one.

经过一些谷歌搜索后，我发现我可以这样做 -

After some googling, I found I can do so by doing something like -

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

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

But, I am not sure how to then created a method to pass the correct (default) image into it.

推荐答案

我用一个计算属性做到了，像这样:

I did it with a computed property, like this:

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

这篇关于添加“默认"图像到我的 <img>(VUE)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！