Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/453.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Vue映像src文件路径不工作_Javascript_Html_Vue.js - Fatal编程技术网

Javascript Vue映像src文件路径不工作

Javascript Vue映像src文件路径不工作,javascript,html,vue.js,Javascript,Html,Vue.js,如果我在vue上使用硬编码路径加载图像,我在通过文件路径加载图像时遇到问题。请参见下面的示例代码 Javascript function getRestaurantsbyId(id) { var restaurants = { "1" : { "name": "xxxx", "description": "xxxxxxxxxx", "address": "xxxxxxxx",

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

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=""> # Display my page as blank not sure why.

<img :src="images/clients/1/xxxxxx.jpeg" class="respimg" alt=""> # Working if value is hardcoded.
#将我的页面显示为空白不确定原因。
#如果值是硬编码的,则工作。

欢迎提出任何意见和建议。

首先,尝试调用
创建的
方法中的
getRestaurantsbyId
函数

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时不需要添加花括号


首先,尝试在创建的
方法中调用
getRestaurantsbyId
函数

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