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