vue中图片文件夹的保存与访问

简介: vue中图片文件夹的保存与访问

 在使用vue框架进行开发的过程中,有两个文件夹都可以存放我们的图片以及样式等,一个是public文件夹,一个是src下的assets文件夹;接下来我们从这两个文件夹对图片的不同处理来进行分析:

1、public

  如果将图片存入public文件夹,系统就会将原来的图片路径及名称编译为一个随机的名字,

经过编译后的图片会极大的减小所占内存,所以在网页中直接展示的图片或者经常随数据库变换而变换的图片都应该放在public文件夹下,这样也可以加快网页的运行速度。

   这里我们把聊天的表情动画图gif放在public的im下面

可以通过下面方式进行访问

 

需要注意,这里需要使用绝对路径来进行访问

2、src/assets

       存入assets文件夹下的图片则不会被编译处理,而是原封不动的保存在服务器中;像网页中一些固定不变的图片如登录注册以及其他各种矢量图就应放于assets中。

存于assets中的图片用相对路径来访问,就是相对于src目录


相关文章
|
3天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
10 0
|
3天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
3天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
10 1
|
3天前
|
JavaScript
vue知识点
vue知识点
11 0
|
4天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
4天前
|
JavaScript C++
vue高亮显示组件--转载
vue高亮显示组件--转载
9 0
|
4天前
|
JavaScript 前端开发 数据安全/隐私保护
揭秘Vue中v-model的内部工作机制
揭秘Vue中v-model的内部工作机制
|
3天前
|
JavaScript 前端开发 定位技术
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
|
3天前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据
|
4天前
|
JavaScript
vue中使用pinia及持久化
vue中使用pinia及持久化
6 0