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

這里寫圖片描述

需求：如何components里面的index.vue怎樣能把assets里面的圖片拿出來。

1.在img標簽里面直接寫上路徑：

2.利用數組保存再循環輸出：

{{ 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里面的完整代碼是這個：

{{ 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中的圖片引用路徑

當我們在Vue.js項目中引用圖片時，關于圖片路徑有以下幾種情形：

使用一

我們在data里面定義好圖片路徑

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

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

{{imgUrl}}">

這樣是錯誤的寫法，我們應該用v-bind綁定圖片的srcs屬性

:src="imgUrl">

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

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

使用二

當我們需要在js代碼里面寫圖片路徑的時候，如果我們在data里面寫

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

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

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

在data里面定義

avatar: avatar

情形三

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

:src="imgUrl" />

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

相關文章：

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。