关于vue的img标签绑定的src的路径找不到的问题

发布时间:2019-05-28 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了关于vue的img标签绑定的src的路径找不到的问题脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

在前端开发中,img标签的src属性非常常见,有很多时候需要使用内联样式来绑定此属性,但是在vue-cli项目中,我们无法通过常见的../这样的相对路径来使用图片,通常需要使用别名,我的项目里已经设置@作为src的别名,但是由于该对象是作为地图组件中marker类的图标使用,因此在经过高德地图的地图组件渲染后,得到的效果如下:


VAR img = document.createElement('img')
    img.src = "@/assets/map_images/place.png"
    img.style.height = '35px';
    img.style.width = '30px';

clipboard.pngclipboard.png

我们可以看到经过地图组件渲染后,src被直接解析成了普通的字符串,这里虽然已经使用了别名,但是并没能被解析成url,经过查找资料,发现可以使用node.js的require方法获取到图片的url,再将图片的url作为src路径使用,效果如下:

 var img = document.createElement('img')
     img.src =  require('@/assets/map_images/place.png')
     img.style.height = '35px';
     img.style.width = '30px';

关于vue的img标签绑定的src的路径找不到的问题

关于vue的img标签绑定的src的路径找不到的问题


至此,在地图组件内使用url无法解析的问题得到了解决。

脚本宝典总结

以上是脚本宝典为你收集整理的关于vue的img标签绑定的src的路径找不到的问题全部内容,希望文章能够帮你解决关于vue的img标签绑定的src的路径找不到的问题所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。