坑之背景
在開發(fā)移必，我們經(jīng)常會動態(tài)引入一些資源承边，比如下面這樣的代碼
const urlPath= '@/assets/webpackhot.jpg'
const url = require(urlPath)
return (
<>
<img alt="無圖片" src={url} />
</>
)
我們意圖是遭殉，urlPath為某種邏輯下的標(biāo)量，其可以通過不同的邏輯引入不同的資源博助，但事實上险污，運行上面的代碼，會報下面的錯誤
Error: Cannot find module '@/assets/webpackhot.jpg'
我使用的是umi3環(huán)境富岳，不同的腳手架環(huán)境可能報錯信息不一樣蛔糯，但一定會報錯的，但我們?nèi)绻皇褂米兞康脑捰质菦]有問題的窖式，說明蚁飒，我們的資源路徑是沒有問題的，這樣就顯得很詭異萝喘，其實淮逻，關(guān)于使用require動態(tài)引入靜態(tài)資源是有一些坑
- 路徑不能為全變量
- 標(biāo)量中不能帶有alias（路徑別名）
記住這兩個坑琼懊，我們分別試一下。
const urlPath= 'assets/webpackhot.jpg'
const url = require(`@/${urlPath}`)
console.log(url)
return (
<>
<img alt="污圖片" src={url} />
</>
)
這樣就不會報錯了爬早，當(dāng)然了哼丈，同學(xué)們也可以下面自己驗證一下把別名加在變量中這個坑。
然后我們看一下筛严，使用正確的引入方式引入的資源醉旦，其路徑結(jié)果應(yīng)該是啥樣的
/static/webpackhot.e8f6ba93.jpg
在umi環(huán)境下，其正確的結(jié)果桨啃，應(yīng)該是編譯后的結(jié)果车胡，如果你的結(jié)果是和你的引入字符串一樣的，那八成是出錯了~記住這個坑吧照瘾！
