vue中本地靜態圖片的路徑應該如何寫
阿新 • • 發佈:2019-01-02
需求:如何components裡面的index.vue怎樣能把assets裡面的圖片拿出來。
1.在img標籤裡面直接寫上路徑:
<img src="../assets/a1.png" class="" width="100%"/>
2.利用陣列儲存再迴圈輸出:
<el-carousel-item v-for="item in carouselData" :key="item.id">
<img :src="item.url" class="carouselImg"/>
<span class="carouselSpan" >{{ item.title }}</span>
</el-carousel-item>
data: () => ({
carouselData:[
{url:require('../assets/a1.png'),title:'你看我叼嗎1',id:1},
{url:require('../assets/a3.png'),title:'你看我叼嗎2',id:2},
{url:require('../assets/a4.png'),title:'你看我叼嗎3',id:3}
]
}),
效果如下:
index.vue裡面的完整程式碼是這個:
<template>
<div>
<div class=" block">
<el-carousel class="carouselBlock">
<el-carousel-item v-for="item in carouselData" :key="item.id">
<img :src="item.url" class="carouselImg"/>
<span class="carouselSpan">{{ item.title }}</span >
</el-carousel-item>
</el-carousel>
</div>
<footer1></footer1>
<img src="../assets/a1.png" class="" width="100%"/>
</div>
</template>
<script>
import footer1 from '../components/public/footer'
export default {
data: () => ({
carouselData:[
{url:require('../assets/a1.png'),title:'你看我叼嗎1',id:1},
{url:require('../assets/a3.png'),title:'你看我叼嗎2',id:2},
{url:require('../assets/a4.png'),title:'你看我叼嗎3',id:3}
]
}),
components:{
footer1
},
}
</script>
<style lang="scss">
@import '../style/mixin';
.carouselBlock{
width: 100%;
height: REM(300);
position:relative;
.carouselImg{
height: REM(300);
width:100%;
}
.carouselSpan{
position: absolute;
bottom: REM(20);
left: REM(20);
font-size: REM(24);
font-weight: bold;
}
}
.el-carousel__container{
width: 100%;
height: REM(300);
}
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>