Vue中img的src屬性繫結問題

2022-07-29 03:24:14 字數 486 閱讀 6805

vue中的元素屬性繫結使用v-bind:attr 如下我們來繫結乙個img元素的src屬性:

url = './assets/logo.png'

至於原因,是因為vue**通過構建工具打包後,檔案的路徑會發生變化

解決方法:

根據vue-cli的檔案結構,其中有乙個叫做static的資料夾,將logo.png放入這個資料夾,然後修改url:

url = '/static/logo.png'

成功載入. 執行npm run build後檢視dist檔案,可以看到有logo.png檔案。

總結:一類的靜態檔案,應該放在這個static資料夾下,這個資料夾下的檔案(夾)會按照原本的結構放在**根目錄下。這時我們再去使用/static絕對路徑,就可以訪問這些靜態檔案了。

vue中img標籤的src屬性總結

初步接觸vue框架時,好多朋友使用img標籤時,設定動態src屬性時,可能都會遇到路徑不生效的問題,咱們廢話不多說,開整 img標籤引用資源 一般不需要webpack處理的資源放在static,需要經過處理的放在assets 1.不需要webpack處理的放在static 不需要webpack處理的...

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

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

Html中img控制項的src屬性

方式一 直接給src屬性乙個伺服器端資源的位址,img控制項會自動獲取並解析資源。方式二 當訪問的資源不在工程路徑下時,想到的辦法是通過返回給img控制項位元組流,讓img控制項解析,開始直接將ajax非同步獲取的位元組流設給了img的src屬性,發現無法顯示,通過的指點,完成通過給src屬性賦予位...