vue-cli3 :src动态绑定图片地址报错404

src在静态绑定图片地址时不会出错，而动态绑定图片地址报错404.

我的写法如下：

<img :scr="imgUrl">
...
data(){
	return {
		imgUrl: '@/assets/images/office1.jpg'  //报错 404
	}
}

原因：

• 静态资源会直接被webpack copy到对应的静态资源文件夹下。而动态资源会被webpack当成模块打包，路径错乱，所以报错404。
• assets目录中的文件会被webpack处理解析成模块依赖，只支持相对路径形式

解决办法
1. 将图片作为模块加载进去

<img :scr="imgUrl">
...
data(){
	return {
		imgUrl: require('@/assets/images/office1.jpg') //成功 不报错
	}
}

2. 将图片放在public文件夹里

• public目录不会被webpack处理，它们会直接被复制到最终的打包目录(默认是（dist/static)下。请注意vue.config.js中的publicPath。

<img :scr=`${{publiPath}}${{imgUrl}}`>
...
data(){
	return {
	//默认情况下publicPath是‘/’ 这里可以省略不写，如不是，则加上下面这句
    	publicPath: process.env.BASE_URL,
		imgUrl: '/image/office1.jpg' //成功 不报错
		//注意 image是public下的一个子文件
		//这里千万不要写成 'public/image/office1.jpg' 会报错！
	}
}