Vue.js How to concatenate a string with a method in img src

Question

So this is my HTML:

<img v-bind:src="'@/assets/'+imgUrl()+'.png'" alt="thumbs-Up" id="thumbsUp">

And this is the script:

import axios from 'axios'
export default {
    data(){
        return{
            status:''
        }
    },
    methods: {
        getStatus(){
            axios.get('/api/health')
            .then(response => this.status = response.data.status)
            .catch(err => console.log(err.message))
        },

        imgUrl(){
            if (this.status =='UP')
            return "thumbsUp"
            else
            return "thumbsDown"
        }
  }
}

The output is the alternative text, even if I got the right path http://localhost:8080/@/assets/thumbsUp.png

Boussadjra Brahim · Accepted Answer · 2021-06-17 09:12:30Z

1

imgUrl has to be a computed property and use require to load the image :

<img v-bind:src="require('@/assets/'+imgUrl+'.png')" alt="thumbs-Up" id="thumbsUp">

and :

import axios from 'axios'
export default {
    data(){
        return{
            status:''
        }
    },
 computed:{
          imgUrl(){
               return this.status ==='UP'?"thumbsUp":"thumbsDown"
            }
        },
    methods: {
        getStatus(){
            axios.get('/api/health')
            .then(response => this.status = response.data.status)
            .catch(err => console.log(err.message))
        },
     
  }
}

answered Jun 17, 2021 at 9:12

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

littleX Over a year ago

can I have you feedback on this post please? stackoverflow.com/questions/68020475/…

Collectives™ on Stack Overflow

Vue.js How to concatenate a string with a method in img src

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related