vue中在data里引入相对路径的方法

问题

在项目的HTML中引入图片的相对路径，这样写是能找到图片显示出来的：

<img src="../../../static/img/step-ongoing.png">

但图片太多感觉太乱了了，想在data中通过变量统一管理。这时发现如果直接在data中这样写图片是找不到的：

<img :src="stepOngoing">

data()  {
	return {
		stepOngoing: '../../../static/img/step-ongoing.png',
	}
}

解决

发现只有这么写才行，require内部引入：

data()  {
	return {
		stepOnGoing: require('../../../static/img/step-ongoing.png'),
	}
}

或者用import 在外部引入：

import stepOnGoing_src from '../../../static/img/step-ongoing.png'

data()  {
	return {
		stepOnGoing: stepOnGoing_src,
	}
}