src/components/system/viewImage.vue

<template>
  <div class="view-image-container">
    <el-dialog
      :visible.sync="visible"
      :fullscreen="true"
      :show-close="true"
      custom-class="image-viewer-dialog"
    >
      <div class="image-wrapper">
        <img
          :src="imageInfo.url"
          :style="{
            width: imageInfo.width + 'px',
            height: imageInfo.height + 'px'
          }"
          @error="handleImageError"
        />
        <i class="el-icon-close close-icon" @click="close"></i>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'ViewImage',
  data() {
    return {
      visible: false,
      imageInfo: {
        url: '',
        width: 800,
        height: 800
      }
    }
  },
  methods: {
    open(params) {
      this.imageInfo.url = params.url
      this.visible = true
      
      // 动态计算图片尺寸
      const img = new Image()
      img.src = params.url
      img.onload = () => {
        const imgScale = img.width / img.height
        this.imageInfo.width = 800
        this.imageInfo.height = 800 / imgScale
      }
    },
    close() {
      this.visible = false
      this.imageInfo = {
        url: '',
        width: 800,
        height: 800
      }
    },
    handleImageError(e) {
      e.target.src = '/img/noPhoto.jpg'
    }
  }
}
</script>
<style lang="scss" scoped>
.view-image-container {
  .image-viewer-dialog {
    background-color: rgba(0, 0, 0, 0.8);
    
    .image-wrapper {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      
      img {
        max-width: 90%;
        max-height: 90%;
        object-fit: contain;
      }
      
      .close-icon {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 24px;
        color: #fff;
        cursor: pointer;
        z-index: 2001;
        
        &:hover {
          color: #f56c6c;
        }
      }
    }
  }
}
</style>