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