問題：Vue3 TypeScript Vite的專案中如何使用require動態引入類似於圖片等靜態資源！
描述：今天在開發專案時（專案框架為Vue3 TypeScript Vite）需要動態引入靜態資源，也就是img標籤的src屬性值為動態獲取，依照以往的做法直接是require引進即可，如下程式碼：
<img class="demo" :src="require(`../../../assets/image/${item.img}`)" / alt="Vue3+TypeScript+Vite怎麼使用require動態引進圖片等靜態資源" >寫上後程式碼波浪線報錯，報錯提示：
找不到名稱“require”。是否需要為節點安裝類型定義? 請嘗試使用
npm i --save-dev @types/node。 ts(2580)
在進行了npm i --save-dev @types/node 安裝以及在TypeScript的設定檔tsconfig.json中新增了配置項目"type":["node"] 後波浪線提示消失，但瀏覽器的控制台仍會報錯，錯誤提示如下：
解決：
先說結論吧，在vite中不能使用require引入圖片資源，因為這裡的require貌似是webpack提供的一種載入能力，由於我們並非使用的webpack作為專案的建置工具，我們使用的是Vite，因此這裡必須轉用Vite提供的靜態資源載入，vite關於這一部分的官方說明在這裡，有興趣的小伙伴可以看官方的文檔：Vite中靜態資源處理；
這裡我們在提煉的說明一下，官網上範例的用法如下：
const imgUrl = new URL('./img.png', import.meta.url).href document.getElementById('hero-img').src = imgUrl
可能不大好理解，簡單的說new URL 一共接收兩個參數，第一個參數即圖片的路徑，這裡就是對應require中的值，第二個參數是vite的一個全域變量，可以理解成直接寫死了import.meta.url，放到專案大致如下：
<img class="t-desktop-icon" :src="getIcon(name)" / alt="Vue3+TypeScript+Vite怎麼使用require動態引進圖片等靜態資源" >
在template 的img上動態引入，getIcon方法如下
function getIcon(name: string) {
return new URL(`../../../../assets/images/svg/${name}`, import.meta.url).href;
}這樣就可以在Vue3 TypeScript Vite中動態引入圖片等靜態資源了
以上是Vue3+TypeScript+Vite怎麼使用require動態引進圖片等靜態資源的詳細內容。更多資訊請關注PHP中文網其他相關文章！
