關于vue的img標簽綁定的src的路徑找不到的問題

lily_wang 發布于2019-08-23 13:51 / 1851人閱讀

摘要：在前端開發中，標簽的屬性非常常見，有很多時候需要使用內聯樣式來綁定此屬性，但是在項目中，我們無法通過常見的這樣的相對路徑來使用圖片，通常需要使用別名我的項目里已經設置作為的別名，但是由于該對象是作為地圖組件中類的圖標使用，因此在經過高德地

在前端開發中，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找不到系統找不到指定的文件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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