Vue3+TypeScript+Vite使用require動態(tài)引入圖片等靜態(tài)資源
問題：Vue3+TypeScript+Vite的項目中如何使用require動態(tài)引入類似于圖片等靜態(tài)資源！
描述：今天在開發(fā)項目時（項目框架為Vue3+TypeScript+Vite）需要 動態(tài)引入靜態(tài)資源，也就是img標(biāo)簽的src屬性值為動態(tài)獲取，按照以往的做法直接是require引入即可，如下代碼：
<img class="demo" :src="require(`../../../assets/image/${item.img}`)" />
寫上后代碼波浪線報錯，報錯提示：
找不到名稱 “require”。是否需要為節(jié)點安裝類型定義? 請嘗試使用
npm i --save-dev @types/node。ts(2580)
在進(jìn)行了npm i --save-dev @types/node 安裝以及在TypeScript的配置文件 tsconfig.json中添加了配置項 "type":["node"] 后波浪線提示消失，但 瀏覽器的控制臺依然報錯，錯誤提示如下：
解決：
先說結(jié)論吧，在vite中不能使用require引入圖片資源，因為這里的require貌似是webpack提供的一種加載能力，由于我們并非使用的webpack作為項目的構(gòu)建工具，我們使用的是Vite，因此這里必須轉(zhuǎn)用 Vite提供的靜態(tài)資源載入，vite關(guān)于這一部分的官方說明在這里，有興趣的小伙伴可以看官方的文檔：Vite中靜態(tài)資源處理；
這里我們在提煉的說明一下，官網(wǎng)上示例的用法如下：
const imgUrl = new URL('./img.png', import.meta.url).href
document.getElementById('hero-img').src = imgUrl
可能不大好理解，簡單的說 new URL 一共接收兩個參數(shù)，第一個參數(shù)即圖片的路徑，這里就是對應(yīng)require中的值，第二個參數(shù)是vite的一個全局變量，可以理解成直接寫死了 import.meta.url，放到項目中大致如下：
<img class="t-desktop-icon" :src="getIcon(name)" />
在 template 的img上動態(tài)引入，getIcon方法如下
function getIcon(name: string) {
return new URL(`../../../../assets/images/svg/${name}`, import.meta.url).href;
}
這樣就可以在Vue3+TypeScript+Vite中動態(tài)引入圖片等靜態(tài)資源了
到此這篇關(guān)于Vue3+TypeScript+Vite使用require動態(tài)引入圖片等靜態(tài)資源的文章就介紹到這了,更多相關(guān)Vue3 TypeScript Vite引入靜態(tài)資源內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解webpack + vue + node 打造單頁面(入門篇)
本篇文章主要介紹了詳解webpack + vue + node 打造單頁面(入門篇) ，非常具有實用價值，需要的朋友可以參考下2017-09-09
今天小編就為大家分享一篇vue加載完成后的回調(diào)函數(shù)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了詳解vue-cli項目在IE瀏覽器打開報錯解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了vue項目中使用this.$confirm方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
談?wù)刅UE種methods watch和compute的區(qū)別和聯(lián)系
本篇文章主要介紹了談?wù)刅UE種methods watch和compute的區(qū)別和聯(lián)系，具有一定的參考價值，有興趣的可以了解一下2017-08-08
今天小編就為大家分享一篇關(guān)于vue項目打包之后背景樣式丟失的解決方案，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
TinyMCE Vue是TinyMCE官方發(fā)布的Vue組件，可以更輕松地在Vue應(yīng)用程序中使用TinyMCE，這篇文章主要介紹了vue中tinymce的使用,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了詳解element-ui中form驗證雜記，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了Vue組件中的父子組件使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
本篇文章主要介紹了詳解Vue雙向數(shù)據(jù)綁定原理解析 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09