vue-cli3开发模式下，引入图片

使用vue-cli3初始化的项目，我们经常有需要在html、js、css中引入图片

图片存放路径

image.png

html 引入图片

1、使用相对路径

 <img src="../assets/images/temp_1_1.png" alt="">

js引入图片

1、使用本机http

initImageLayer(){
     let url = 'http://192.168.1.243:8081/temp_1_1.png' //不需要文件夹
     this.imageLayerObj = new ImageLayerHelper(url,this.tempBound,globleMap)
},

不需要添加images文件夹

2、使用require

initImageLayer(){
    let url = require('@/assets/images/temp_1_1.png')
     this.imageLayerObj = new ImageLayerHelper(url,this.tempBound,globleMap)
},

需要完整的路径

3、根目录

initImageLayer(){
    let url = '/temp_1_1.png'
     this.imageLayerObj = new ImageLayerHelper(url,this.tempBound,globleMap)
},

css引入图片

image.png