test2.jpeg

用插件photo-sphere-viewer發(fā)現(xiàn)有問題，圖片過大，c盤內(nèi)存小于大概5G就不行，加載不出來，可能圖片預(yù)加載，具體搞不清楚，所以自己寫了一個，還是可以加載的

image.png

image.png

具體代碼：https://github.com/cloveryuan/photo_viewer/tree/main

使用：

• 代碼是一個組件，傳入圖片路徑就可以了
• 遇到的問題，如果一個頁面有兩個地方用的同一張圖報錯
  Failed to execute 'texImage2D' on 'WebGL2RenderingContext': Overload resolut
  每次傳照片路徑的地方，在路徑后面加入時間戳就可以解決了

//引入組件photo，傳入bigImg
  <el-dialog
      :title="photoSphereName"
      :visible.sync="visible"
      :footer="false"
      :append-to-body="true"
      custom-class="photo_wrap"
      width="70%">
      <photo :bigImg="bigImg" v-if="visible"></photo>
    </el-dialog>

//調(diào)用全景圖的方法，img是傳入的路徑，如果不會重復(fù)圖片可以不加時間戳
initPhotoSphere(name, img) {
      // img = img.replace('http://36.133.34.40:82/', '') + '?' + new Date().getTime()//解決跨域的
      img = img + '?' + new Date().getTime()
      this.photoSphereName = name
      this.visible = true
      this.bigImg = img
      
      //這下面是以前使用photo-sphere-viewer的方法，不必看
      // if (this.viewer) {
      //   this.viewer.destroy()
      // }
      // this.$nextTick(() => {
      //   this.viewer = new Viewer({
      //     container: document.querySelector('#viewer'),
      //     panorama: img,
      //     size: {
      //       width: '100%',
      //       height: '60vh'
      //     }
      //   })
      // })
    }