vue3+vite+ts 在img上获取静态图片
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
1.在vue3+ts项目中插入图片
方式一,单个单个的插入
import word from '/@/assets/images/word.png'
在setup中return ,或是
方式二: 推荐
核心方法,直接复制使用,需要更改URL地址这是我项目中的…/…/assets/images/${url},这里静态资源路径需要改成你们自己的
// 获取assets静态资源
function getAssetsFile(url: string) {
return new URL(`../../assets/images/${url}`, import.meta.url).href;
}
页面使用
<img :src="getAssetsFile(imageCheck(item.suffix) + '.png')" class="image" lazy />
imageCheck方法
/**
* 不同文件显示不同图片方法
*/
const imgList = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'wmf', 'psd'];
const wordList = ['doc', 'docx'];
const excelList = ['xls', 'xlsx'];
const videoList = [
'mp4',
'avi',
'3gp',
'flv',
'wmv',
'asf',
'mpeg',
'm4v',
'mov',
'f4v',
'rmvb',
'rm',
'vob',
'ts',
];
function imageCheck(val: String) {
if (!val) {
return 'unKnow';
}
let str = val.toLowerCase();
if (imgList.some((item) => item == str)) {
return 'image';
}
if (wordList.some((item) => item == str)) {
return 'word';
}
if (excelList.some((item) => item == str)) {
return 'excel';
}
if (videoList.some((item) => item == str)) {
return 'video';
}
if ('pdf' == str) {
return 'pdf';
}
if ('text' == str) {
return 'text';
}
return 'unKnow';
}
ok完毕,这是vite官网推荐的方法
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)