關(guān)于vue的img標(biāo)簽綁定的src的路徑找不到的問題

lily_wang 發(fā)布于2019-08-23 13:51 / 1832人閱讀

摘要：在前端開發(fā)中，標(biāo)簽的屬性非常常見，有很多時(shí)候需要使用內(nèi)聯(lián)樣式來綁定此屬性，但是在項(xiàng)目中，我們無法通過常見的這樣的相對路徑來使用圖片，通常需要使用別名我的項(xiàng)目里已經(jīng)設(shè)置作為的別名，但是由于該對象是作為地圖組件中類的圖標(biāo)使用，因此在經(jīng)過高德地

在前端開發(fā)中，img標(biāo)簽的src屬性非常常見，有很多時(shí)候需要使用內(nèi)聯(lián)樣式來綁定此屬性，但是在vue-cli項(xiàng)目中，我們無法通過常見的../這樣的相對路徑來使用圖片，通常需要使用別名,我的項(xiàng)目里已經(jīng)設(shè)置@作為src的別名，但是由于該對象是作為地圖組件中marker類的圖標(biāo)使用，因此在經(jīng)過高德地圖的地圖組件渲染后，得到的效果如下：

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

我們可以看到經(jīng)過地圖組件渲染后，src被直接解析成了普通的字符串，這里雖然已經(jīng)使用了別名，但是并沒能被解析成url，經(jīng)過查找資料，發(fā)現(xiàn)可以使用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";

至此，在地圖組件內(nèi)使用url無法解析的問題得到了解決。

GPU云服務(wù)器云服務(wù)器系統(tǒng)找不到指定的路徑獲取img的src 下載的python找不到系統(tǒng)找不到指定的文件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/99691.html

相關(guān)文章

匯總Vue常見報(bào)錯(cuò)以及解決方案實(shí)例

　　前言　　學(xué)習(xí)中有一種方式就是錯(cuò)題匯總，在學(xué)習(xí)代碼，日常書寫代碼中對于遇到報(bào)錯(cuò)，也要匯總，這樣可以在以后編碼過程中避免或解決這些問題。　　一、報(bào)錯(cuò)結(jié)構(gòu)　　首先對于報(bào)錯(cuò)分為：錯(cuò)誤類型、錯(cuò)誤位置、錯(cuò)誤描述、錯(cuò)誤規(guī)則和問題數(shù)量。　　如上圖：　　報(bào)錯(cuò)類型為編譯錯(cuò)誤；　　錯(cuò)誤位置在D:\myel\src\views\admin\AdminView.vue中的第四行第2個(gè)字符；（報(bào)錯(cuò)位置不一定每次都是準(zhǔn)確的...

3403771864 2023-01-20 08:10 評論0 收藏0
vue 項(xiàng)目要點(diǎn)總結(jié)（二）

摘要：靜態(tài)圖片怎么引入對重復(fù)元素的遍歷產(chǎn)品數(shù)據(jù)統(tǒng)計(jì)數(shù)據(jù)預(yù)測流量分析廣告發(fā)布在重復(fù)的部分用如果某個(gè)重復(fù)的部分比較分散可用循環(huán)，循環(huán)是從標(biāo)簽本身就開始的既是的載體，也是與同一個(gè)標(biāo)簽的靈活使用遍歷的時(shí)候可以接受幾種賦值方式直接綁定的屬性靜態(tài)logo圖片怎么引入 showImg(https://segmentfault.com/img/bV2iRj?w=350&h=163); 對重復(fù)元素...

liuhh 2019-08-22 13:54 評論0 收藏0
vue單文件中引用路徑的處理

摘要：原文地址單文件中引用路徑的處理如有錯(cuò)誤，歡迎指正單文件的開發(fā)過程中，在單文件模版中可能會涉及到文件路徑的處理，比如中的的處理等。的文檔中的資源路徑處理一節(jié)給出了是如何處理模版中的資源路徑的。原文地址：vue單文件中引用路徑的處理如有錯(cuò)誤，歡迎指正！ vue單文件的開發(fā)過程中，在單文件模版中可能會涉及到文件路徑的處理，比如 , style 中的 background 的處理等。下文中討...

OnlyLing 2019-08-21 18:41 評論0 收藏0
Web前端開發(fā)過程踩過的坑以及一些小方法技巧（持續(xù)更新）

摘要：一上瀏覽器使用不允許事件代理到上選擇器以上綁定可能會出現(xiàn)點(diǎn)擊失效的情況。對于，如果工具是以下版本，在中加入以下代碼以上的版本加入以下代碼八開發(fā)對于文件的處理問題。解決方法有給元素設(shè)置絕對定位即可。元素?fù)Q成內(nèi)聯(lián)元素，如。一、iOS上瀏覽器使用jQuery不允許事件代理到document上 $(document).on(click, 選擇器, function(){}); 以上綁定可能...

arashicage 2019-08-23 15:13 評論0 收藏0
Web前端開發(fā)過程踩過的坑以及一些小方法技巧（持續(xù)更新）

摘要：一上瀏覽器使用不允許事件代理到上選擇器以上綁定可能會出現(xiàn)點(diǎn)擊失效的情況。對于，如果工具是以下版本，在中加入以下代碼以上的版本加入以下代碼八開發(fā)對于文件的處理問題。解決方法有給元素設(shè)置絕對定位即可。元素?fù)Q成內(nèi)聯(lián)元素，如。一、iOS上瀏覽器使用jQuery不允許事件代理到document上 $(document).on(click, 選擇器, function(){}); 以上綁定可能...

binta 2019-08-02 14:15 評論0 收藏0