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中,他会被当成一个字符串来处理,并不会转换为图片的路径。