vue引入图片的方式

vue引入图片的方式

1.img标签

1. ​ 静态引入 静态路径加载
   相对路径

< img :alt="item" src="../../assets/imgs/1.jpg" width="170" />

​ 绝对路径

   ​		< img :alt="item" src="@/assets/imgs/1.jpg" width="170" />

​ 网络路径

   ​     < img :alt="item" 
               src="https://gw.alicdn.com/tps/TB1W_X6OXXXXXcZXVXXXXXXXXXX-400-400.png" width="170">

2. ​ 动态引入 require 驱动加载
   ​

    data:{
   ​          imgUrl: require('@/assets/imgs/1.jpg')
   ​	 	}
   ​	< img :alt="item" :src="imgUrl" width="170" @click="changeBigImg(imgUrl)">

​ 使用函数表达式
​ < img :alt="item" :src="retImg(imgUrl)" width="170" @click="changeBigImg(imgUrl)">

​ 表达式
​

retImg(u) { 
   ​	if (u) {  
   ​        return 'https://gw.alicdn.com/tps/TB1W_X6OXXXXXcZXVXXXXXXXXXX-400-400.png'         	}
    else if(a) {	
   ​        return require('@/assets/imgs/1.jpg')
   ​	}else{
   ​		return require('../../assets/imgs/1.jpg')
   ​ }

},

2.标签的背景图片设置-backgroundImage

1. 在class中设置 使用~符号

   .item {  
       display: inline-block;  
       width: 45px;  
       height: 40px;  
       margin: 2px;  
       background-color: skyblue;  
       background-image: url(~@/assets/imgs/2.jpg);
   }
   

2. 在style中设置

   <div:style="{
     backgroundPositionY:-40+'px',
     backgroundPositionX:-40+'px',
     backgroundImage:'url('+imgUrl+')'
     }" 
   >

imgUrl: require('@/assets/imgs/1.jpg'),

动态修改的话 
changeBigImg(url) {
      this.imgUrl = require('@/assets/imgs/2.jpg'),
}