从接口里面拿出渲染出来的图片，用uniapp里面的 uni.previewImage 安卓手机查看不会模糊但是ios会模糊

页面部分

    <div id="BlogContent"  v-html="detail.content" ></div>

方法一：ios部分机型会模糊

  updated () {
    this.$nextTick(() => {
    // 拿到所有的img
      const array = this.$refs.content.$el.querySelectorAll('img')
      for (let index = 0; index < array.length; index++) {
        const element = array[index]
        element.addEventListener('click', function () {
          // src = 拿到的路径
          let src = element.getAttribute('src')
          let urls = []
          urls[0] = src
          console.log(urls[0] + '8888888888888')
          // 预览图片
          uni.previewImage({
            current: 0,
            urls: urls,
          })
        })
      }
    })
   }

方法二：安卓 ios都不会模糊

 1.安装依赖

npm install v-viewer --save

  2.全局引入 

import Vue from 'vue';
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
  Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }
})

如果这样引入还报Viewer 的错就在 index.html 里面引入 viewer.min.js 

使用

    this.$nextTick(() => {
      var _this = this
      let imgel = document.getElementsByTagName('img')
      for (var i = 0; i < imgel.length; i++) {
        let src = imgel[i].getAttribute("src")
        imgel[i].setAttribute("data-imgurl", src);
        imgel[i].addEventListener('click', function () {
          let viewer = new Viewer(document.getElementById('BlogContent'), {
            url: 'data-imgurl'
          });
      }
    })

API形式调用   

注意：arrSrc用来存储路径一定要是个数组 不然会报错！！！！

  updated () {
    this.$nextTick(() => {
      var arrSrc = [];
      var _this = this
      $("div[id=BlogContent] img").each(function () {
          arrSrc.push($(this).attr('src'));
      });
       _this.$viewerApi({ 
          images: arrSrc,
        })
       });
    })
  },