創建一個assetsImages.js文件，
文件放哪里取決于個人習慣，
我的如下，

• 引入本地圖片
• 當引入時，打包dist成功后，再運行dist會有問題，暫時不用，待修正，請移步到下方new URL寫法

/*** 引入本地圖片* 當引入時，打包dist成功，運行dist會有問題，暫時不用，待修正*/ const picture = import.meta.globEager('../assets/images/*'); const imgList = Object.keys(picture).filter(item => true).map(item => {const url = picture[item]?.default;const name_suffix = url.substring(url.lastIndexOf('/') + 1, url.length);const name = name_suffix.substring(0, name_suffix.indexOf('.'));return {url,name_suffix,name,}; });export default imgList;

使用方式：

換下方這種簡單方式：用new URL() 和 import.meta

/*** 獲取本地圖* @param name // 文件名 如 doc.png* @returns {*|string}*/function getAssetsImages(name) {return new URL(`/src/assets/images/${name}`, import.meta.url).href;}

使用方法

const file = getAssetsImages('doc.png');

運行后：

打包后：base64顯示

總結

以上是生活随笔為你收集整理的vue3 vite版本 引入本地静态图片的方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。