vue3+vite動(dòng)態(tài)引入圖片方式
vue3+vite動(dòng)態(tài)引入圖片
說(shuō)明
在vue2中可以使用require動(dòng)態(tài)引入圖片，但在開(kāi)發(fā)vue3+vite項(xiàng)目的時(shí)候想要?jiǎng)討B(tài)的去引入圖片來(lái)顯示，嘗試過(guò)require 發(fā)現(xiàn)報(bào)錯(cuò) require is not defind。
因?yàn)閞equire是webpack的方法，而vite是不支持require方法的，vite官網(wǎng)：
服務(wù)時(shí)引入一個(gè)靜態(tài)資源會(huì)返回解析后的公共路徑：
import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl例如，imgUrl 在開(kāi)發(fā)時(shí)會(huì)是 /img.png，在生產(chǎn)構(gòu)建后會(huì)是 /assets/img.2d8efhg.png。
行為類似于 Webpack 的 file-loader。
區(qū)別在于導(dǎo)入既可以使用絕對(duì)公共路徑（基于開(kāi)發(fā)期間的項(xiàng)目根路徑），也可以使用相對(duì)路徑。
實(shí)現(xiàn)方式
方式一
比較笨的實(shí)現(xiàn)方法 使用 import()
const bgImage = ref<string>("");
const bgImageFunc = (url: string) =>
import(url).then((res: any) => {
bgImage.value = res.default;
});
// 使用
bgImageFunc("../../assets/images/bg/bg.jpg");方式二
使用vite官方提供的方式
/**
* <p> 獲取加載圖片地址 </p>
* examples: bg/bg.png
* @param imgPath: string
*/
export const requireImg = (imgPath: string) => {
return new URL(`../assets/images/${imgPath}`, import.meta.url).href;
};
// 使用
requireImg("bg/bg.png");方式三
使用 import.meta.glob 提供的方法
/**
* <p> 獲取加載圖片地址 </p>
* examples: /src/assets/bg/bg.png
* @param url: string
*
*/
export const useFile = (url: string) => {
const modules: Record<string, any> = import.meta.glob("@/assets/images/**/*.{png,svg,jpg,jpeg}", { eager: true });
if (modules[url]) return modules[url].default;
else {
// 地址錯(cuò)誤
console.log("Error url is wrong path");
}
};
// 使用 必須是帶有/src 完整目錄
useFile("/src/assets/bg/bg.png");以上三種方式可以任選一種即可
vue3使用vite2.0動(dòng)態(tài)引入本地圖片img
需求：
引入到j(luò)s中批量綁定在dom上，作圖標(biāo)進(jìn)行展示。
這樣就可以動(dòng)態(tài)引入了
第二種直接引入
import tyarticle_iconpe from '@/assets/images/home_icon/brochure_icon.png'
第三種可以直接在assets前面加一個(gè)src就能識(shí)別了
new URL(`/src/assets/images/home_icon/name_icon`, import.meta.url).href
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue style屬性設(shè)置背景圖片的相對(duì)路徑無(wú)效的解決
這篇文章主要介紹了vue style屬性設(shè)置背景圖片的相對(duì)路徑無(wú)效的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
下面小編就為大家分享一篇vue中axios解決跨域問(wèn)題和攔截器的使用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要為大家詳細(xì)介紹了Vue的diff算法原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
vue解析Json數(shù)據(jù)獲取Json里面的多個(gè)id問(wèn)題
這篇文章主要介紹了vue解析Json數(shù)據(jù)獲取Json里面的多個(gè)id問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要為大家詳細(xì)介紹了vue路由傳參的3種基本模式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-02-02
vue 實(shí)現(xiàn)dot-dropdown的實(shí)例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)dot-dropdown的相關(guān)操作,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2025-06-06
Vue3?PC端頁(yè)面開(kāi)發(fā)規(guī)范及說(shuō)明
這篇文章主要介紹了Vue3?PC端頁(yè)面開(kāi)發(fā)規(guī)范及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue打包的時(shí)候自動(dòng)將px轉(zhuǎn)成rem的操作方法
這篇文章主要介紹了vue打包的時(shí)候自動(dòng)將px轉(zhuǎn)成rem的操作方法,需要的朋友可以參考下2018-06-06
今天小編就為大家分享一篇基于form-data請(qǐng)求格式詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
這篇文章主要為大家詳細(xì)介紹了vue如何安裝使用Quill富文本編輯器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-09