Почему, когда я пытаюсь динамически изменить путь изображения, я вижу только альтернативную информацию? - PullRequest
Новая
       22

Почему, когда я пытаюсь динамически изменить путь изображения, я вижу только альтернативную информацию?

0 голосов
/ 12 февраля 2020

Я хочу изменить тик на крест и наоборот.

enter image description here

<template>
    <img class="create-answer" :src="yesImg" @click="changeAnswerImg(yesImg)" alt="yes">
</template>

<script>
export default{
    name: 'name',
    data: () => ({
        yesImg: '../assets/img/yes.png',
        noImg: '../assets/img/no.png',
    }),

    methods() {
        changeAnswerImg(imgPath){
            if(imgPath == this.yesImg) {
                this.yesImg = '../assets/img/no.png';
            } else if (imgPath == this.noImg) {
                this.yesImg = '../assets/img/yes.png';
            }
        },
    }
}
</script>

Дело в том, что когда я нажимаю на изображение, я вижу только alt info (alt = "yes").
Однако консоль показывает мне, что путь успешно изменился.

1 Ответ

1 голос
/ 12 февраля 2020

Вы можете использовать require для динамического рендеринга изображения c. 

<template>
  <div>
     <img @click="changeAnswerImg(icon)" :src="icon" width="20px" height="auto"> 
  </div>
</template>
<script>
export default {
  data: () => ({
    icon1: require('@/assets/chat.png') ,
    icon2: require('@/assets/logo.png'),
    icon: require('@/assets/chat.png')
  }),
  methods:{
    changeAnswerImg(imgPath){
            if(imgPath == this.icon1) {
                this.icon = this.icon2;
            } else if (imgPath == this.icon2) {
                this.icon = this.icon1;
            }
        },
  },
  mounetd(){
    this.icon = this.icon1;
  }
}
</script>

codesandbox - https://codesandbox.io/s/vuejs-dynamic-image-path-niwk3

...