vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue本地静态图片的路径

vue中本地静态图片的路径应该怎么写

作者:开心大表哥

这篇文章主要介绍了vue中本地静态图片的路径应该怎么写,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue中本地静态图片的路径应该怎么写

需求

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文