图片放在 assets目录下 和static 目录下
- 固定的引入(不使用v-bind)
<img src="../assets/logo.png">
- 把图片放static 目录,直接通过data引入
// template
<img v-bind:src=imgSrc>
// srcipt
export default {
data () {
return {
imgSrc: '../static/launch.png'
};
}
};
或者不通过data,直接在html中引入
//template
<ul class="index-board-list">
<li class="board-item" v-for="(item,index) in boardList" :class="[{'line-last':index % 2 != 0},'index-board-' + item.id]">
<img :src="'../../static/images/'+(index+1)+'.png'">
<p>{{index}}</p>
<div class="board-item-right">
<p>{{ item.title }}</p>
<p>{{ item.description }}</p>
<button class="buy_now">立即购买</button>
</div>
</li>
</ul>
//script
export default {
data() {
return {
boardList: [
{
title: "开放产品",
description: "开放产品是一款开放产品",
id: "car",
toKey: "analysis",
saleout: false,
// src: "../../static/images/1.png"
},
{
title: "品牌营销",
description: "品牌营销帮助你的产品更好地找到定位",
id: "earth",
toKey: "count",
saleout: false,
// src: "../../static/images/2.png"
},
{
title: "使命必达",
description: "使命必达快速迭代永远保持最前端的速度",
id: "loud",
toKey: "forecast",
saleout: true,
// src: "../../static/images/3.png"
},
{
title: "勇攀高峰",
description: "帮你勇闯高峰,到达事业的顶峰",
id: "hill",
toKey: "publish",
saleout: false,
// src: "../../static/images/4.png"
}
]
}
}
};
- 如果放在其它目录(如assets目录),直接通过data引入,则需要如下引入
require('../assets/launch.png') 或者 import logo from '../assets/logo.png'
如:
// template
<img v-bind:src=imgSrc>
// srcipt
export default {
data () {
return {
imgSrc: require('../assets/launch.png')
};
}
};
import logo from '../assets/logo.png
// template
<img v-bind:src=imgSrc>
// srcipt
export default {
data () {
return {
imgSrc: logo
};
}
};