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)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于element日歷組件實(shí)現(xiàn)簽卡記錄
這篇文章主要為大家詳細(xì)介紹了基于element日歷組件實(shí)現(xiàn)簽卡記錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了詳解使用vue實(shí)現(xiàn)tab操作,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
在Vue項(xiàng)目中使用v-if指令控制ECharts圖表顯示時,可能會遇到圖表無法正常渲染或顯示錯誤的問題,下面這篇文章主要介紹了Vue中使用ECharts與v-if的問題和解決方案,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了vue項(xiàng)目內(nèi)存溢出問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue3?中一個組件從創(chuàng)建到掛在,會經(jīng)過3個重點(diǎn)步驟：創(chuàng)建組件實(shí)例,設(shè)置組件實(shí)例,創(chuàng)建并執(zhí)行帶副作用的渲染函數(shù),本文將著重講清?創(chuàng)建組件實(shí)例、設(shè)置組件實(shí)例?這兩個過程都做了什么,這部分邏輯很簡單,但你會從中學(xué)習(xí)到?Vue?優(yōu)秀的實(shí)踐技巧,需要的朋友可以參考下2024-07-07
Vue3進(jìn)行樣式Scoped和Global的設(shè)置方法
在 Vue 3 中,組件化開發(fā)成為了我們提升前端開發(fā)效率的利器,其中,樣式的管理也是一個至關(guān)重要的部分,在 Vue 中,我們會經(jīng)常使用兩種樣式作用域：Scoped 樣式和 Global 樣式,本文將通過示例代碼來介紹Vue3如何進(jìn)行樣式Scoped和Global的設(shè)置,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了 解決Vue打包后訪問圖片/圖標(biāo)不顯示的問題，本文給大家介紹的非常詳細(xì)，具有一定的參考解決價值,需要的朋友可以參考下2019-07-07
vue生成初始化名字相近的變量并放到數(shù)組中的示例代碼
項(xiàng)目上有一個需求,頁面上有50、60個數(shù)據(jù)變量,是依次排序遞增的變量,中間有個別變量用不到,不想把這些變量直接定義在data() { }內(nèi),這篇文章主要介紹了vue生成初始化名字相近的變量并放到數(shù)組中的示例代碼,需要的朋友可以參考下2024-08-08
Vue實(shí)現(xiàn)關(guān)聯(lián)頁面多級跳轉(zhuǎn)（頁面下鉆）功能的完整實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)關(guān)聯(lián)頁面多級跳轉(zhuǎn)（頁面下鉆）功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
Vue表單綁定的實(shí)例代碼（單選按鈕,選擇框（單選時,多選時,用 v-for 渲染的動態(tài)選項(xiàng)）
本文通過實(shí)例代碼給大家介紹了Vue表單綁定（單選按鈕，選擇框（單選時，多選時,用 v-for 渲染的動態(tài)選項(xiàng)）的相關(guān)知識，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05