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

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')
		}
	}
}