vue坑--动态绑定图片地址

vue坑–图片地址动态绑定无法显示

在项目中经常要写到图片路径，一般直接写很简单

<img src="../src/assets/logo.png" alt="">

但是如果要使用v-bind动态绑定路径时，可能会出现图片无法正常显示的情况

<img :src="imgSrc" alt="">

data(){
		return{
			imgSrc:'../src/assets/logo.png'
		}
	}

会出现下方这种图片无法显示的情况

解决方法

在引用路径前使用require去获取图片地址

<img :src="imgSrc" alt="">

data(){
		return{
			imgSrc:require('../src/assets/logo.png')
		}
	}

问题原因

首先本地静态资源才会出现这种问题，在webpack中，他会被当成一个字符串来处理，并不会转换为图片的路径。