Vue image src file path not working

Question

Im having a problem loading a image via file_path on vue if I used a hardcoded path its working. See sample code below

Javascript

function getRestaurantsbyId(id) {
    var restaurants = {
        "1" : {
            "name": "xxxx",
            "description": "xxxxxxxxxx",
            "address": "xxxxxxxx",
            "contact_number": "rttttttttt"
            "cover_image": "images/clients/1/xxxxxx.jpeg"
        }
    };
    return restaurants[id];
}

var restaurant_info = new Vue({
    el: '#main',
    data: {
        info: getRestaurantsbyId(restaurant_id)
    }
})

HTML

<img src="{{ info.cover_image }}" class="respimg" alt="">

as per other solutions on the web I tried the follow below.

<img :src="{{ info.cover_image }}" class="respimg" alt=""> # Display my page as blank not sure why.

<img :src="images/clients/1/xxxxxx.jpeg" class="respimg" alt=""> # Working if value is hardcoded.

Any comments and suggestions are welcome.

Answer 1

First, try calling the getRestaurantsbyId function in the created method.

function getRestaurantsbyId(id) {
    var restaurants = {
        "1" : {
            "name": "xxxx",
            "description": "xxxxxxxxxx",
            "address": "xxxxxxxx",
            "contact_number": "rttttttttt"
            "cover_image": "images/clients/1/xxxxxx.jpeg"
        }
    };
    return restaurants[id];
}

var restaurant_info = new Vue({
    el: '#main',
    data: {
        info: {
          cover_image: null
        }
    },
    created: function() {
        this.info = getRestaurantsbyId(restaurant_id);
    }
})

And in your template, you don't need to add curly braces when binding to the src

<img :src="info.cover_image" class="respimg" alt="">