這篇文章給大家介紹了vue中本地靜態(tài)圖片路徑寫(xiě)法及Vue.js中引用圖片路徑的方式，需要的朋友參考下吧

這里寫(xiě)圖片描述

需求：如何components里面的index.vue怎樣能把a(bǔ)ssets里面的圖片拿出來(lái)。

1.在img標(biāo)簽里面直接寫(xiě)上路徑：

2.利用數(shù)組保存再循環(huán)輸出：

{{ item.title }}

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里面的完整代碼是這個(gè)：

{{ item.title }}

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

},

}

@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;

}

PS：下面看下Vue.js中的圖片引用路徑

當(dāng)我們?cè)赩ue.js項(xiàng)目中引用圖片時(shí)，關(guān)于圖片路徑有以下幾種情形：

使用一

我們?cè)赿ata里面定義好圖片路徑

imgUrl:'../assets/logo.png'

然后，在template模板里面<img src="

{{imgUrl}}">

這樣是錯(cuò)誤的寫(xiě)法，我們應(yīng)該用v-bind綁定圖片的srcs屬性

:src="imgUrl">

或者img src="../assets/logo.png">

這種方式是按照正常HTML語(yǔ)法引用路徑，放在模板里可以被webpack打包出來(lái)。

使用二

當(dāng)我們需要在js代碼里面寫(xiě)圖片路徑的時(shí)候，如果我們?cè)赿ata里面寫(xiě)

imgUrl:'../assets/logo.png'

此時(shí)webpack只會(huì)把它當(dāng)做字符串處理從而找不到圖片地址，此時(shí)我們可以使用import引入圖片路徑：:src="avatar" />

import avatar from '@/assets/logo.png'

在data里面定義

avatar: avatar

情形三

我們也可以把圖片放在外層的static文件夾里面，然后在data里面定義：imgUrl ： '../../static/logo.png'

:src="imgUrl" />

上面是我整理給大家的，希望今后會(huì)對(duì)大家有幫助。

相關(guān)文章：

總結(jié)

以上是生活随笔為你收集整理的vue 直接访问静态图片_在使用vue中实现本地静态图片路径（详细教程）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。