vue项目根据不同手机尺寸设置引入不同图片的功能
在改一个bug，要求 根据不同手机 来动态的引入不同的图片 主要是小手机引入 2x的 大手机引入3x的
这里提到一个知识点retinajs 有兴趣的可以去看看 英文官网链接 中文链接
这个提供了动态判断的功能 建议看看他的源码 基本就懂了
然后到了我的项目 在vue引入
1 npm install retinajs --save
2 然后再main.js里引入 我直接引入的源码 requir("retinajs/dist/retinajs.js") 然后Vue.use(retinajs)
3 然后页面标签上做手脚 添加data-rjs
4 你可以在中文网站上看到例子 然后这个h5的data属性 你可以添加高质量的图片路径，也可以写倍数 主要你得去看懂源码
他会做判断 然后倍数的话给你字符串拼接 路径的话直接替换
5 然后问题来了 动态替换路径后 路径变了 但是图片出不来 因为没有加载 报错404
6 然后我先想到了在页面用几个img标签先去加载这几个图片 然后切换的时候图片已经下载下来 就可以显示了
==============================华丽的分割线=============================
但是问题又来了 这样太消耗资源了 如果都这么加载 页面图片多了 猴年能看见 所以 推翻重做
读了那个js的源码 我找到 了核心
上面的意思 先判断有window对象后 调用window的devicePixelRatio属性 这个能告诉我们屏幕的物理尺寸和视网膜尺寸的比例 这里你可以参考这个文章 很6的
总之我加上了判断 也防止读取不到的情况 然后将这个比例存入了localStronge里
然后再页面上
拿出这个比例 如果是3的 就采用3x的 否则 都是2x的 主要还有1.5等小数的 或者1的 这里我就处理2种情况
然后页面的img这样
这里浪费时间的就是 上面看懂他的源码 然后就是require（）去自己动态加载这个图片
希望可以帮到别人 在这里做个记录
vue项目根据不同手机尺寸设置引入不同图片的功能相关推荐
- vue 项目在index.html页面直接引入jq库，报错$ is not defined解决方案
近日在vue项目开发中遇到一个问题:vue 项目在index.html页面直接引入jq库,报错$ is not defined解决方案... 首先说一下为什么会出现这个错误,其实项目发布到线上是不会出 ...
- vue项目中浏览器图标的设置
在vue项目中,我们怎样设置浏览器图标? 我们来看vue项目的目录结构,根目录下有一个index.html,这个就相当于我们普通项目中的各个html页面文件,所以设置方法就是在index.html的h ...
- VUE+Canvas实现输入文字生成对应的字体图片小功能
你是不是经常浏览字体网站的时候,发现他们的"字体生成器"和预览功能很好奇,为什么输入框输入文字之后,点击预览,下面都会修改对应的字体内容,以便达到了没有安装字体也可以预览这个字体效 ...
- vue项目怎么在手机查看
一般我们使用指令npm run serve启动一个项目之后,会出现两个网址, 一个是本地的,一个是网络的.在手机浏览器地址栏输入第二个网址(Network),我们可以在手机端查看我们的vue项目. [ ...
- 如何本地局域网下访问vue项目？【手机和电脑均可】
在学习vue的时候,在电脑上跑起来,总喜欢还能在别的电脑或者自己手机上能看见,这就需要小小的配置一下 win10设置 需要配置一下电脑的防火墙,把所需的端口(如:8080)打开. 设置方法如下: Wi ...
- Vue项目本地运行环境下设置既能localhost访问又能IP访问，并且可以外网环境下通过域名访问
打开项目build下index.js文件,将localhost改为 0.0.0.0,port端口号改不改都行,只要保证这个端口号没有被占用即可. 然后打开项目package.json文件,找到 将红框 ...
- app vue 真机运行_使用 HBuilder 将 Vue 项目打包成手机 App
在开发移动端 app 时可以选择原生 app 和 webapp, 原生 app 体验好,开发成本高,相对的 webapp 体验要差,开发成本低.webapp 要求很低,可以说只要会开发web 站就能开 ...
- vue项目中 axios请求拦截器与取消pending请求功能 - 年少、 - 博客园
在开发vue项目中,请求是不可缺少的,在发送请求时常常需要统一处理一些请求头参数等设置与响应事件,这时利用请求拦截器再好不过. 这里以axios请求为例 实现了设置统一请求头添加token, 其中to ...
- vue项目打包后出现页面布局异常、图片显示不出来等问题
通常我们写完vue项目后,会执行 npm run serve 对项目进行打包.执行完后,就在项目的目录中生成dist文件夹.一开始,我以为双击dist文件夹里index.html会把打包后的项目运行起 ...
最新文章
- Intellij IDEA 2018.2 搭建Spring Boot 应用
- Zookeeper高级
- 定点量化误差python仿真.零极点(1)
- 飞鸽传书最新C++源码：这两个消息钩子
- python importlib_学习python importlib的导入机制
- 华中科技大学计算机视觉张朋,管涛-华中科技大智能媒体计算与网络安全实验室...
- C/C++回调方式系列之一 函数指针和函数回调模式
- matlab的imnoise
- 一款完整的多用户微信公众平台开发源码，带文档免费分享
- AllenNLP框架学习笔记（数据篇之一）
- java发包工具_小米范工具系列之四：小米范HTTP批量发包器
- Elasticsearch 的 Task 停止方法
- MySQL必知必会——第十四章使用子查询
- 联想计算机如何设置用户名和密码忘了,联想电脑怎么设置密码
- android 图片气泡,关于实现微信聊天气泡里显示图片解决方案
- [计算机网络]交换机环路问题
- BlockingQueue(阻塞队列)
- 单词学习-长久的过程
- 哪些情况可以判定需要进行仪器校准？
- 内存输出流ByteArrayOutputStream