首页
视频
资源
登录
小可爱
什么时候才能领悟,取之越多失之越多
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
ASP.NET
16篇
JS
1篇
.NET
23篇
英语
4篇
redis
4篇
随笔
30篇
EF
3篇
前端
53篇
.net core
25篇
python
8篇
版本控制
1篇
java
2篇
nginx
2篇
docker
6篇
后端
5篇
更多
mysql
8篇
数据库
15篇
微服务
4篇
移动开发
7篇
架构
6篇
linux
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
vue3 显示本地asserts图片
880
人阅读
2023/11/13 16:21
总访问:
880296
评论:
0
收藏:
0
手机
分类:
前端
[TOC] ### 方法一,先import在使用 vue3中这样显示 ``` import chatHealth from '@/assets/chat-health.png' <img :src="chatHealth" alt="" /> ``` 当然要看项目中路径相关的配置也可能是这样显示: ``` import loveimg from '/@/assets/icons/love.png' <el-image style="width: 16px; height: 16px" :src="loveimg" fit="fit" /> ``` ### 方法二,根据动态图片名称使用 **编写方法:** 注意这里得路径是相对找到assts得路径,这个根据项目的层级不一样,需要自己调整 ``` const getAssetsFile = (url: string) => { return new URL(`../../../assets/icons/${url}`, import.meta.url).href; }; ``` **使用:** ``` <el-image style="width: 16px; height: 16px;margin-right: 6px;" :src="getAssetsFile('loveon.png')" fit="fit" /> ``` **当然也可以把这个方法封装出来,这样每个页面都可以使用了** ?在src目录下创建一个util文件夹,文件夹里创建一个utils.ts文件,加入如下代码: ``` // 获取assets静态资源 const getAssetsFile = (url: string) => { return new URL(`../assets/images/${url}`, import.meta.url).href; }; export default { getAssetsFile, }; ``` 在vue文件中导入: ``` <script setup lang="ts"> import util from 'src/util/utils' </script> ``` 使用: ``` <template> <img class="bg-img" :src="util.getAssetsFile('love.png')" alt=""> </template> ```
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}