慢慢長路第一步
最近，想實現，當點擊“首頁”時，圖片變色的功能，其實就是換了張圖片顯示，術語叫動態加載圖片。
頁面使用的是Vue + Mint UI框架，代碼片段如下：
<mt-tabbar> /<mt-tabbar>
<mt-tab-item> /<mt-tab-item>
首頁
.........
js代碼片段為：
imgs:{ 'img1': "../assets/icon/index.png",
'img2': "../assets/icon/brand.png",
'img3': "../assets/icon/cart.png",
'img4': "../assets/icon/me.png },
如此簡單的功能，可是圖片就是一直加載不出來，更談不上動態加載了。
一開始以為是路徑問題，但是不使用動態加載
圖片是能正常出來的，表明了圖片路徑沒有問題。
這功能是很常見的，網上資源例子一大把，我的代碼又不報錯，就是不顯示圖片，這就很納悶了。搜索了半天，發現原來vue中動態加載圖片需要使用require引用資源的，於是改代碼為以下，OK了。
imgs:{ 'img1': require("../assets/icon/index.png"),
'img2': require('../assets/icon/brand.png'),
'img3': require("../assets/icon/cart.png"),
'img4': require("../assets/icon/me.png") },
白花花的半天時間，就敗給了一個資源引用上，傷心。希望本記錄能幫大家踏平這個小坑。
分享到:
閱讀更多 文話教育 的文章
