vite創(chuàng)建的項目如何實現(xiàn)動態(tài)的獲取圖片
更新時間：2026年02月17日 11:56:19 作者：m0_60827885
在Vite項目中動態(tài)獲取圖片,可以創(chuàng)建一個函數(shù),返回`new URL()`的href,傳入圖片地址和`import.meta.url`,然后將該函數(shù)抽離為公共方法,在定義數(shù)據(jù)時,去掉路徑即可使用
vite創(chuàng)建的項目動態(tài)的獲取圖片
在使用weabpack的項目中動態(tài)的獲取圖片可以采用：
但是使用vite創(chuàng)建的項目，require是無效的。需要通過下面的方法來動態(tài)獲取圖片
1、創(chuàng)建一個函數(shù)
函數(shù)的參數(shù)為你的圖片名字
2、return一個newURL().href
傳入兩個參數(shù)。第一個參數(shù)是你的圖片（img）的地址，第二個參數(shù)是import.meta.url
3、將這個函數(shù)抽離為公共方法
4、就可以引入后使用了
//函數(shù)的代碼
export const getImgUrl =(img)=>{
return new URL(`../../assets/img/${img}`, import.meta.url).href
}
路徑的問題：
就是在函數(shù)中第一個參數(shù)寫了圖片的路徑，所以在我們定義的數(shù)據(jù)里就要刪了路徑就行了。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js雖然說是數(shù)據(jù)驅(qū)動頁面的，但是有時候我們也要獲取dom對象進(jìn)行一些操作。這篇文章主要給大家介紹了關(guān)于vue第一次獲取不到元素的解決方法，需要的朋友可以參考下2021-06-06
這篇文章主要介紹了Element UI框架中巧用樹選擇器的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了vue中echarts3.0自適應(yīng)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
有時，你可能希望將任意信息附加到路由上，如過渡名稱、誰可以訪問路由等。這些事情可以通過接收屬性對象的meta屬性來實現(xiàn)，并且它可以在路由地址和導(dǎo)航守衛(wèi)上都被訪問到2022-09-09
這篇文章主要為大家介紹了Vue不能watch數(shù)組和對象變化解決方案示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
Vue3調(diào)度器錯誤解析完美解決Unhandled error during executi
最近開發(fā)時在Vue3項目中看到控制臺出現(xiàn)?“Unhandled error during execution of scheduler flush. This is likely a Vue internals bug”這個警告,下面給大家介紹Vue3調(diào)度器錯誤解析,完美解決Unhandled error during execution of scheduler flush的問題,一起看看吧2025-04-04
Vue-cli3執(zhí)行serve和build命令時nodejs內(nèi)存溢出問題及解決
這篇文章主要介紹了Vue-cli3執(zhí)行serve和build命令時nodejs內(nèi)存溢出問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue-router路由模式詳解(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了Vue的組件,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2021-10-10
webpack 3 + Vue2 使用dotenv配置多環(huán)境的步驟
這篇文章主要介紹了webpack 3 + Vue2 使用dotenv配置多環(huán)境,env文件在配置文件都可以用, vue頁面用的時候需要在 webpack.base.conf.js 重新配置,需要的朋友可以參考下2023-11-11