vue中本地靜態(tài)圖片的路徑應(yīng)該怎么寫

更新時(shí)間：2023年10月17日 08:51:52 作者：開心大表哥

這篇文章主要介紹了vue中本地靜態(tài)圖片的路徑應(yīng)該怎么寫,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue中本地靜態(tài)圖片的路徑應(yīng)該怎么寫

需求

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

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

<img src="../assets/a1.png" class="" width="100%"/>

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

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

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

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue自定義權(quán)限標(biāo)簽詳細(xì)代碼示例
這篇文章主要給大家介紹了關(guān)于vue自定義權(quán)限標(biāo)簽的相關(guān)資料,在Vue中你可以通過創(chuàng)建自定義組件來實(shí)現(xiàn)自定義標(biāo)簽組件,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下
2023-09-09
仿ElementUI實(shí)現(xiàn)一個(gè)Form表單的實(shí)現(xiàn)代碼
這篇文章主要介紹了仿ElementUI實(shí)現(xiàn)一個(gè)Form表單的實(shí)現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
Vue實(shí)現(xiàn)textarea固定輸入行數(shù)與添加下劃線樣式的思路詳解
這篇文章主要介紹了使用Vue實(shí)現(xiàn)textarea固定輸入行數(shù)與添加下劃線樣式的思路詳解，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-06-06
vue3+uniapp 上傳附件的操作代碼
uni-file-picker搭配uni.uploadFile在使用問題上踩了不少坑,我至今還是沒辦法在不改uniapp源碼基礎(chǔ)上實(shí)現(xiàn)限制重復(fù)文件的上傳,這篇文章介紹vue3+uniapp 上傳附件的操作代碼,感興趣的朋友一起看看吧
2024-01-01
詳解使用Vue.Js結(jié)合Jquery Ajax加載數(shù)據(jù)的兩種方式
本篇文章主要介紹了詳解使用Vue.Js結(jié)合Jquery Ajax加載數(shù)據(jù)的兩種方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
element UI upload組件上傳附件格式限制方法
今天小編就為大家分享一篇element UI upload組件上傳附件格式限制方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
淺析Vue中method與computed的區(qū)別
在new Vue的配置參數(shù)中的computed和methods都可以處理大量的邏輯代碼，但是什么時(shí)候用哪個(gè)屬性，要好好區(qū)分一下才能做到正確的運(yùn)用vue。這篇文章主要介紹了Vue中method與computed的區(qū)別,需要的朋友可以參考下
2018-03-03
Vue package.json配置深入分析
這篇文章主要介紹了Vue package.json配置，package.json是每個(gè)前端項(xiàng)目都會(huì)有的json文件，位于項(xiàng)目的根目錄中。很多腳手架在創(chuàng)建項(xiàng)目的時(shí)候會(huì)幫我們自動(dòng)初始化好 package.json
2023-01-01
vue-cli下的vuex的簡單Demo圖解(實(shí)現(xiàn)加1減1操作)
這篇文章主要介紹了vue-cli下的vuex的簡單Demo（實(shí)現(xiàn)加1減1操作）,本文圖文并茂給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2018-02-02
vue實(shí)現(xiàn)登錄時(shí)的圖片驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登錄時(shí)的圖片驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04