Vue3+Vite中不支持require的方式引入本地圖片的解決方案
更新時間：2024年01月22日 10:24:40 作者：小付學代碼
這篇文章主要介紹了Vue3+Vite中不支持require的方式引入本地圖片的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
Vue3+Vite中不支持require的方式引入本地圖片
使用vue2+webpack的時候是用require引入圖片
require(`../assets/${img}.png`)但是vue3+vite這么寫就報錯：
require is not define
原因是require是webpack的方法，vite找不到對應的圖片路徑，需要使用下面的方式進行處理。
詳細見官網解釋：
靜態(tài)資源處理 {#static-asset-handling} | Vite中文網
使用vite也有兩種引入靜態(tài)文件方法：
第一種
import imageIcon from "../assets/image.png"; <img class="patient" :src="imageIcon" />
第二種
import.meta.url 是一個 ESM 的原生功能，會暴露當前模塊的 URL。
將它與原生的 URL 構造器 組合使用，在一個 JavaScript 模塊中，通過相對路徑我們就能得到一個被完整解析的靜態(tài)資源 URL。
const url = new URL('靜態(tài)路徑', import.meta.url).href第一個參數即圖片的路徑，這里就是對應require中的值。
第二個參數是vite的一個全局變量，可以理解成直接寫死了 import.meta.url
使用示例：
<img :src="index !== clickIndex ? downImg : upImg">
// 導入兩張圖片
const downImg = new URL('../../assets/index/down.png', import.meta.url).href
const upImg = new URL('../../assets/index/up.png', import.meta.url).href總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue spa應用中的路由緩存問題與解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要給大家介紹了關于vue3.0 sfc中setup變化的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2021-10-10
這篇文章主要為大家介紹了JavaScript獲取echart曲線上任意點位的值詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
下面小編就為大家分享一篇vue進行圖片的預加載watch用法實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
關于vue項目中會出現(xiàn)一些需求,就是右鍵菜單項的功能實現(xiàn),下面這篇文章主要給大家介紹了關于vue封裝一個右鍵菜單組件(復制粘貼即可使用)的相關資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue指令之v-for的使用說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue中的ESLint配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端原生小球滑塊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue如何根據不同的環(huán)境使用不同的接口地址問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。這篇文章主要介紹了vuex與組件聯(lián)合使用的方法,需要的朋友可以參考下2018-05-05