vue引入图标（vue中引入图片的方法）

一    
    
   、图片放在/public目录下

<!-- img标签引入图片：图片名称    
    
    
，这种属于相对路径


     


     


   ，在index.html的同级目录下查找此图片 --> <img src="login-bg.png"> <!-- img标签引入图片：/ + 图片名称
 




 




 

，这种属于绝对路径   

   

   

，/表示编译后的dist文件夹 --> <img src="/login-bg.png"> <!-- style样式引入图片时 

     

     

  ，需要用url来处理图片路径

  




  




  
，url内部写法和img的src相同 --> <div style="background-image: url(login-bg.png);"></div> <div style="background-image: url(/login-bg.png);"></div>

二     


     


     

、图片在/src/assets目录下

此时需要使用相对路径来引用

我们先看一下@是否配置为了src目录  


  


  


，查看vue.config.js configureWebpack: { resolve: { alias: { @: resolve(src), }, } }

方法1：在vue中设置一个变量来引入

data () { img: require(@/assets/images/img.jpg) }

然后直接在img中使用

<img :src="img">

方法2：在css样式中引用

<div class="img-class"></div> <style scoped> .img-class { background-image: url(~@/assets/img/img.png) } </style>