vue中img標籤的src屬性總結

2021-10-10 05:06:39 字數 699 閱讀 5383

初步接觸vue框架時,好多朋友使用img標籤時,設定動態src屬性時,可能都會遇到路徑不生效的問題,咱們廢話不多說,開整!!!

img標籤引用資源

一般不需要webpack處理的資源放在static,需要經過處理的放在assets

1.不需要webpack處理的放在static

不需要webpack處理的,直接使用絕對路徑呼叫,如"/static/xx/***.png"

栗子html**

js**

data()

}

成功讀取到了logo.png. 執行npm run build後檢視dist檔案,發現logo.png原封不動地放在了根目錄下。

2.需要webpack處理的放在assets

可以使用import還是require進行引入.import為es6語法,require為commonjs形式.

栗子1

栗子2

栗子3

//html1data()	

}

也可以直接引用網路路徑

//html1data()	

}

先總結到這裡,後續遇到新的方法再補充,希望對你有幫助.

Vue中img的src屬性繫結問題

vue中的元素屬性繫結使用v bind attr 如下我們來繫結乙個img元素的src屬性 url assets logo.png 至於原因,是因為vue 通過構建工具打包後,檔案的路徑會發生變化 解決方法 根據vue cli的檔案結構,其中有乙個叫做static的資料夾,將logo.png放入這個...

vue動態繫結img標籤的src位址

問題 如果使用vue lazyloader載入那就是 摘自 在webpack中會將來當做模組來用,因為是動態載入的,所以url loader將無法解析位址,然後npm run dev 或者npm run build之後導致路徑沒有被加工。摘自 注意 require assets images 這部分...

富文字上傳的內容中img標籤的src屬性丟失

在一次專案上線後,突然發現後台系統的上傳功能出了問題。是要發布一篇文章,文章內容是以富文字的形式儲存的,上傳後發現顯示不出來,看資料庫儲存的字段發現img標籤沒有src屬性,當時就奇了怪了,因為在本地測試的時候是沒有問題。然後進行遠端debug發現是接收的時候就已經沒有了。這個時候本地和正式產生的結...