vue3+vite 動態(tài)引用靜態(tài)資源及動態(tài)引入assets文件夾圖片的多種方式
更新時間：2023年10月11日 15:02:00 作者：我總是詞不達意
通過require動態(tài)引入, 發(fā)現(xiàn)報錯：require is not defind,這是因為 require 是屬于 Webpack 的方法,本文給大家介紹vue3+vite 動態(tài)引用靜態(tài)資源及動態(tài)引入assets文件夾圖片的多種方式,感興趣的朋友一起看看吧
這里我們先假設：
靜態(tài)文件目錄：src/assets/images/
我們的目標靜態(tài)文件在：src/assets/images/home/home_bg.png
<img :src="require('@/assets/images/home/home_bg.png')" />通過require動態(tài)引入， 發(fā)現(xiàn)報錯：
require is not defind，這是因為 require 是屬于 Webpack 的方法
第一種方式（適用于單個資源文件）
import homeBg from 'src/assets/images/home/home_bg.png' <img :src="homeBg" />
第二種方式（適用于多個資源文件，動態(tài)傳入文件路徑）
new URL() + import.meta.url
在src目錄下創(chuàng)建一個util文件夾，文件夾里創(chuàng)建一個utils.ts文件
// 獲取assets靜態(tài)資源
const getAssetsFile = (url: string) => {
return new URL(`../assets/images/${url}`, import.meta.url).href;
};
export default {
getAssetsFile,
};在vue文件中導入
<script setup lang="ts"> import util from 'src/util/utils' </script>
使用方式
<template>
<img class="bg-img" :src="util.getAssetsFile('bg.png')" alt="">
</template>第三種方式（適用于多個資源文件，這種方式引入的文件必須指定到具體文件夾路徑，傳入的變量中只能為文件名，不能包含文件路徑）
例如在assets/images文件下還有一個home文件夾
// 獲取assets靜態(tài)資源
const getAssetsFile = (url: string) => {
const path = `../assets/images/home/${url}`;
const modules = import.meta.glob("../assets/images/home/*");
return modules[path].default;
};
export default {
getAssetsFile,
};<script setup lang="ts"> import util from 'src/util/utils' </script>
<template>
<img class="bg-img" :src="util.getAssetsFile('bg.png')" alt="">
</template>如果是背景圖片引入的方式（一定要使用相對路徑）
.bg-box{
background-image: url('../../assets/images/bg.png');
}到此這篇關于vue3+vite 動態(tài)引用靜態(tài)資源，動態(tài)引入assets文件夾圖片的幾種方式的文章就介紹到這了,更多相關vue3 vite 動態(tài)引用靜態(tài)資源內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue.config.js文件devServer字段的常用選項詳解
在?Vue?CLI?生成的?vue.config.js?文件中,devServer?字段用于配置開發(fā)服務器的選項,本文給大家介紹vue.config.js文件devServer字段的常用選項,感興趣的朋友一起看看吧2023-11-11
vxe-table表格組件,編輯單元格詳解(el-table組件同樣適用)
這篇文章主要介紹了vxe-table表格組件,編輯單元格詳解(el-table組件同樣適用),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了vue引入js數(shù)字小鍵盤的實現(xiàn)代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-05-05
router-view組件作為vue最核心的路由管理組件,在項目中作為路由管理經常被使用到,本文主要為大家詳細介紹了router-view具體使用,希望對大家有所幫助2023-12-12
vue2.0.js的多級聯(lián)動選擇器實現(xiàn)方法
下面小編就為大家分享一篇vue2.0.js的多級聯(lián)動選擇器實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了Vue實現(xiàn)步驟條效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
在Vue應用中，通常需要將一些狀態(tài)進行持久化，以便在用戶關閉瀏覽器或刷新頁面后，常見的方法就是LocalStorage和SessionStorage，所以本文就來講講這兩種方法的具體實現(xiàn)吧2023-06-06
在項目開發(fā)過程中,我們經常會用到svg矢量圖,本文主要介紹了vue3中引入svg矢量圖的實現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下2023-11-11
Vue.js?是一個流行且強大的?JavaScript?框架,它允許我們構建動態(tài)和交互式?Web?應用程序,本文我們將深入探討?Vue.js?應用程序中內存泄漏的原因,并探索如何定位和修復這些問題的有效策略,希望對大家有所幫助2023-09-09
Vue推薦使用模板,但需用render函數(shù)在高級場景下直接生成VNode,通過createElement參數(shù)控制虛擬DOM,適合復雜動態(tài)UI和高階組件,性能更高但需權衡可讀性,本文給大家介紹vue渲染函數(shù)render的使用,感興趣的朋友一起看看吧2025-06-06