vue動態載入靜態資源

2022-08-20 12:24:13 字數 994 閱讀 8880

專案背景:專案的使用場景是面向資訊保安相關部門,環境很有可能沒有公網,區域網並不穩定,所以無法使用七牛等cdn儲存資源。從而採用引入本地資源的方式

通常一張本地靜態在vue中的寫法是這樣

但是,img標籤如果在src路徑中使用變數,會被編譯為字串,導致編譯後的路徑就是我們寫上去的字串形式,比如你在data中定義了乙個變數src,然後在img標籤中引用

//data中定義變數src

data()

}//模版中的標籤

在實際開發中,難免會需要動態生成路徑的場景,那麼如何正確顯示呢?

1. 在當前頁面全域性import位址

//使用import引入

import pic1 from '@/assets/icon/demo1.png'

import pic2 from '@/assets/icon/demo2.png'

//在data中定義變數

data()

}}//在html中使用

可以正確顯示,但需要名稱和你引入的手動做好對應。作為乙個程式設計師,當然不會使用這麼low的操作了,所以就有了下文

2. 使用require

require可以在**中使用,所以我們可以在獲取資料的同時,為數物件增加乙個src的屬性

getdata() )

}

let src = '@/assets/icon/demo.png';

require(src)

//報錯「. is not a module」

3.將本地資源放到static目錄下引用

getdata() )

}

中動態路徑載入 UE4靜態 動態載入資源方式

ue4靜態 動態載入資源方式 本文將詳細介紹使用ue4靜態載入和動態載入的實現方式靜態載入指的是在建構函式中完成的載入方式,這種方式的弊端明顯,就是需要寫死路徑,一旦改變路徑讀取失敗很容易造成程式崩潰api介面 constructorhelpers fclassfinder 和fobjectfind...

springboot載入靜態資源

使用springboot寫了簡單的web專案,頁面使用jsp檔案 但是靜態資源js 載入不到,看了下官方文件發現是因為路徑不對 所以專案靜態資源應該配置在根路徑下這四個資料夾中是可以直接訪問到的 meta inf resources,public,resources,static下的資源,對映路徑 ...

vue 載入靜態資源之路由跳轉傳參

一 準備乙個js檔案把資料放進去,這裡面的靜態要放在專案的public資料夾下面哦 let array 等等 匯出 export default array 二 在需要的頁面引入,列印出streetarray可以看到我們的資料,我們將它迴圈處理push到我們自己定義的陣列codes中import s...