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