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

lily_wang 发布于2019-08-23 13:51 / 1715人阅读

摘要：在前端开发中，标签的属性非常常见，有很多时候需要使用内联样式来绑定此属性，但是在项目中，我们无法通过常见的这样的相对路径来使用图片，通常需要使用别名我的项目里已经设置作为的别名，但是由于该对象是作为地图组件中类的图标使用，因此在经过高德地

在前端开发中，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无法解析的问题得到了解决。

GPU云服务器云服务器系统找不到指定的路径获取img的src 下载的python找不到系统找不到指定的文件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99691.html

汇总Vue常见报错以及解决方案实例

　　前言　　学习中有一种方式就是错题汇总，在学习代码，日常书写代码中对于遇到报错，也要汇总，这样可以在以后编码过程中避免或解决这些问题。　　一、报错结构　　首先对于报错分为：错误类型、错误位置、错误描述、错误规则和问题数量。　　如上图：　　报错类型为编译错误；　　错误位置在D:\myel\src\views\admin\AdminView.vue中的第四行第2个字符；（报错位置不一定每次都是准确的...

3403771864 2023-01-20 08:10 评论0 收藏0
vue 项目要点总结（二）

摘要：静态图片怎么引入对重复元素的遍历产品数据统计数据预测流量分析广告发布在重复的部分用如果某个重复的部分比较分散可用循环，循环是从标签本身就开始的既是的载体，也是与同一个标签的灵活使用遍历的时候可以接受几种赋值方式直接绑定的属性静态logo图片怎么引入 showImg(https://segmentfault.com/img/bV2iRj?w=350&h=163); 对重复元素...

liuhh 2019-08-22 13:54 评论0 收藏0
vue单文件中引用路径的处理

摘要：原文地址单文件中引用路径的处理如有错误，欢迎指正单文件的开发过程中，在单文件模版中可能会涉及到文件路径的处理，比如中的的处理等。的文档中的资源路径处理一节给出了是如何处理模版中的资源路径的。原文地址：vue单文件中引用路径的处理如有错误，欢迎指正！ vue单文件的开发过程中，在单文件模版中可能会涉及到文件路径的处理，比如 , style 中的 background 的处理等。下文中讨...

OnlyLing 2019-08-21 18:41 评论0 收藏0
Web前端开发过程踩过的坑以及一些小方法技巧（持续更新）

摘要：一上浏览器使用不允许事件代理到上选择器以上绑定可能会出现点击失效的情况。对于，如果工具是以下版本，在中加入以下代码以上的版本加入以下代码八开发对于文件的处理问题。解决方法有给元素设置绝对定位即可。元素换成内联元素，如。一、iOS上浏览器使用jQuery不允许事件代理到document上 $(document).on(click, 选择器, function(){}); 以上绑定可能...

arashicage 2019-08-23 15:13 评论0 收藏0
Web前端开发过程踩过的坑以及一些小方法技巧（持续更新）

摘要：一上浏览器使用不允许事件代理到上选择器以上绑定可能会出现点击失效的情况。对于，如果工具是以下版本，在中加入以下代码以上的版本加入以下代码八开发对于文件的处理问题。解决方法有给元素设置绝对定位即可。元素换成内联元素，如。一、iOS上浏览器使用jQuery不允许事件代理到document上 $(document).on(click, 选择器, function(){}); 以上绑定可能...

binta 2019-08-02 14:15 评论0 收藏0