dvcp_v2_wxcp_app/library/apps/AppBuilding/AiImage.vue

<template>
  <section class="AiImage">
    <div v-if="$slots.default" @tap="prev">
      <slot/>
    </div>
    <u-image v-else :src="image" @tap="prev">
      <image v-if="link" class="errorImage" slot="error" :src="$cdn+'link.png'"/>
      <image v-else-if="miniapp" class="errorImage" slot="error" :src="$cdn+'miniwxmp.jpg'"/>
      <div v-else-if="$slots.errorImage" slot="error">
        <slot name="errorImage"/>
      </div>
      <image v-else class="errorImage" slot="error" :src="$cdn+'file.png'"/>
    </u-image>
  </section>
</template>

<script>
import {mapActions} from "vuex";

export default {
  name: "AiImage",
  data() {
    return {
      dialog: false
    }
  },
  computed: {
    image() {
      return this.src?.replace(/\\/g, '/')
    }
  },
  props: {
    src: String,
    preview: Boolean,
    link: Boolean,
    miniapp: Boolean,
    file: {
      default: () => {
      }
    }
  },
  methods: {
    ...mapActions(['previewFile', 'injectJWeixin']),
    prev() {
      if (this.preview) {
        if (!!this.image) {
          uni.previewImage({
            current: this.image,
            urls: [this.image],
            success() {
              sessionStorage.setItem("previewImage", " 1")
            }
          })
        } else {
          this.previewFile({size: 1, ...this.file})
        }
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.AiImage {
  ::v-deep image {
    width: 160px;
    height: 160px;
    object-fit: cover;
  }

  ::v-deep .u-image__error {
    position: relative;
  }

  .errorImage {
    width: 80px;
    height: 80px;
  }
}
</style>