时间戳

首页 > 解决方案 > Vue图像src文件路径不起作用

javascript - Vue图像src文件路径不起作用

问题描述

如果我使用硬编码路径，我在 vue 上通过 file_path 加载图像时遇到问题。请参阅下面的示例代码

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="">

根据网络上的其他解决方案，我尝试了以下操作。

<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.

欢迎任何意见和建议。

标签： javascripthtmlvue.js

解决方案

首先，尝试getRestaurantsbyId在方法中调用函数created。

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);
    }
})

并且在您的模板中，绑定到 src 时不需要添加花括号

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

推荐阅读