【vue】路径别名配置和本地、网络图片显示

vue.config.js

一、别名配置

const path = require("path");
const resolve = dir => path.join(__dirname, dir)

module.exports = {
	chainWebpack: (config) => {
		config.resolve.alias // 添加别名
            .set('@', resolve('src'))
            .set("@libs",resolve('src/libs'))
			.set('@pages', resolve('src/pages'))
			.set('@static', resolve('src/static'))
	}
}

主义resolce是对路径的一个拼接，
.set(’@’, resolve(‘src’))
不要再src后边再配置"/"
所以正常找图片就是
@/assets/…

二、本地和网络图片显示

(1) 本地图片显示
如果是默认显示的话就可以了

<img src="@/assets/...">

如果是动态加载，为了和让webpack能和v-bind区分，需要加上require

data里：
let img = require("@assets/...")
<img :src="img">

(2)网络图片
直接赋值就可以了

<img :src="your url">