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

最新推荐文章于 2025-05-21 23:43:40 发布

转载最新推荐文章于 2025-05-21 23:43:40 发布 · 2.2k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000017237511

文章标签：

#javascript #前端 #ViewUI

本文介绍在Vue项目中，如何解决地图组件内图片路径解析问题。通过使用Node.js的require方法，成功获取图片URL，实现地图标记图标正常显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前端开发中，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';

我们可以看到经过地图组件渲染后，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';

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