Vue3+TypeScript+Vite怎麼使用require動態引進圖片等靜態資源

問題：Vue3 TypeScript Vite的專案中如何使用require動態引入類似於圖片等靜態資源！

描述：今天在開發專案時（專案框架為Vue3 TypeScript Vite）需要動態引入靜態資源，也就是img標籤的src屬性值為動態獲取，依照以往的做法直接是require引進即可，如下程式碼：

<img  class="demo lazy"  src="/static/imghwm/default1.png"  data-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 lazy"  src="/static/imghwm/default1.png"  data-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中文網其他相關文章！