Добавление изображения по умолчанию к моему <img>(VUE) - PullRequest
Новая
       5

Добавление изображения по умолчанию к моему <img>(VUE)

0 голосов
/ 17 октября 2018

У меня есть область, где люди могут загружать свои собственные пользовательские изображения.Но если они этого не делают, я хотел бы показать по умолчанию.

После некоторого поиска в Google, я обнаружил, что могу сделать это, сделав что-то вроде - 

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

Но я неУбедитесь, как создать метод для передачи в него правильного изображения (по умолчанию).

Ответы [ 2 ]

0 голосов
/ 22 мая 2019

Я сделал это с вычисленным свойством, как это: 

<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>
0 голосов
/ 17 октября 2018

Я бы предложил создать для этого компонент, так как он звучит как то, что будет использоваться в других местах.

Пример JsFiddle

Компонент 

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