项目中的图片在build之后总会出现各种引用不到的问题，报404，解决方法如下：
webpack中配置别名
...
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'assets': path.resolve(__dirname, '../src/assets'),
'img': resolve('static/img'),
'%': resolve('./static')
}
},
...
image.png
CSS loader 会把把非根路径的url解释为相对路径， 加~前缀才会解释成模块路径。
在使用时加上~,告诉加载器它是一个模块，而不是相对路径。例如：
<img src="~img/navbar/空间分析.png" alt="" />
但是在js中使用相对路径时，不需要加~，例如：
<template>
<img src="~assets/images/logo.jpg" />
</template>
<script>
import 'assets/css/style.css'
</script>
<style>
.logo {
background: url(~asset/images/bg.jpg)
}
</style>
只有在template中的静态文件地址和style中的静态文件地址需要加~, 在script里的, 别名定义成什么就写什么.
在js数据中如何引用图片
因为webpack会将图片当做模块来引用，所以在js中需要使用require将图片引用进来，不能直接以字符串的形式。
let imageUrl = require("./img/marker_green.png");
具体请查看vue中图片src路径赋值
