vue3 vite版本 引入本地静态图片的方式
vue3引入本地静态图片
·
创建一个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显示
更多推荐
已为社区贡献3条内容
所有评论(0)