vuejs的.vue模板中img標籤的圖片如何載入？

01-11

var demo = new Vue({ el: "#demo", data: { myurl: "https://static.zhihu.com/static/revved/img/sticky_header/new_logo.010e8320.png" } })

& & &

Html： &


    &

&
JS:

import luan from "./../assets/luan.jpg"

import mouse from "./../assets/mouse.jpg"

import yellow from  "./../assets/yellow.jpg"

export default{ data(){ return{ banners: [ { imgUrl: luan }, { imgUrl: mouse }, { imgUrl: yellow }, ], } } }

你可以這麼寫&，item.pic是通過ajax獲取到的圖片路徑，你隨意替換

關於vue.js 2.0中，圖片路徑獲取的方法！

HTML原生結構：&

在vue中

var vm = new Vue({

el: ".m-el",

data: {

items:[

{

id:"",

img:"",

}

]

// 在 `methods` 對象中定義方法

methods: {

get:function(){

this.items=JSON;

//JSON 字元串||對象

}

filters: {

imgUrl: function(value) {

if (!value) return "";

value="image/"+value;

return value;

}

});

採用 vm 的filters 方法進行

JSON=&> [{

"id": "1",

"img": "0.jpg",

{

"id": "2",

"img": "1.jpg",

}]