vue中本地静态图片的路径应该如何写

小鱼儿 2022-05-30 05:46 282阅读 0赞

![这里写图片描述][format_png]  
需求：如何components里面的index.vue怎样能把assets里面的图片拿出来。  
1.在img标签里面直接写上路径：

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}
          ]
        }),

效果如下：  
![这里写图片描述][format_png 1]  
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>

[format_png]: /images/20220530/2bb79dd920b44d78a91bfe17598eeb49.png
[format_png 1]: /images/20220530/a5f86d1d20f545b38440470900162f77.png