Vue中引入本地图片无法显示的问题

如果你在使用Vue过程中引入本地图片如:

在这里插入代码片
export default {
	data:{
		return {
			src:'./assets/image/a.jpg' 
		}
	}
}

这种引入方式是无效的,因为Vue中的打包工具webpack是按照字符打包的,不会做任何处理,所以需要import外部引入或者require内部引入。

//外部引入
import a from './assets/image/a.jpg'
export default {
	data:{
		return {
			src:'./assets/image/a.jpg'
		}
	}
}
//内部引入
export default {
	data:{
		return {
			src:require('./assets/image/a.jpg')
		}
	}
}

Logo

前往低代码交流专区

更多推荐