为什么当我尝试动态更改图像路径时，我只能看到 alt 信息？

Question

我的意思是把tick改成cross反之

<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").
但是，控制台显示路径已成功更改。

Answer 1

您可以使用require动态渲染图像。

<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

为什么当我尝试动态更改图像路径时，我只能看到 alt 信息？

Why when I am trying to dynamically change the path of image I can only see the alt information?

vue.js

vue-cli