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