在改一个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（）去自己动态加载这个图片

希望可以帮到别人  在这里做个记录