Vue.js data variable concatenate with image SRC

Last Updated: March 6, 2020

In your Vue component, sometimes you have to change the :src of the image tag with Vue data variable

If you want to change the following code and you need to put host name as a variable

 <img :src="http://localhost/public/images/companies/'+customer.logo" />

I have introduced a variable public_url

 <img :src="public_url+'images/companies/'+customer.logo" />
export default {
data() {
        return {
mounted() {


You can not use curly brackets (moustache tags) in attributes. Use the above method to add variable to attribute