chat-pc/src/components/talk/message/ImageMessage.vue

<script lang="ts" setup>
import { NImage, NSpin } from 'naive-ui'
import { getImageInfo } from '@/utils/functions'
import { ITalkRecordExtraImage, ITalkRecord } from '@/types/chat'

const props = defineProps<{
  extra: ITalkRecordExtraImage
  data: ITalkRecord
  maxWidth?: Boolean
}>()

const img = (src: string, width = 200) => {
  const info = getImageInfo(src)

  if (info.width == 0 || info.height == 0) {
    return {}
  }

  if (info.width < width) {
    return {
      width: `${info.width}px`,
      height: `${info.height}px`
    }
  }

  return {
    width: width + 'px',
    height: `${info.height / (info.width / width)}px`
  }
}
</script>
<template>
  <section
    class="im-message-image"
    :class="{ left: data.float === 'left' }"
    :style="img(extra.url, 350)"
  >
    <div class="image-container">
      <n-image class="h-149px" :src="extra.url" />
      <!-- 上传中的loading蒙版 -->
      <div v-if="props.extra.is_uploading" class="loading-overlay">
        <n-spin size="large" />
      </div>
    </div>
  </section>
</template>
<style lang="less" scoped>
.im-message-image {
  overflow: hidden;
  padding: 5px;
  border-radius: 5px;
  background: var(--im-message-left-bg-color);
  height:149px;
  
  &.left {
    background: var(--im-message-right-bg-color);
  }

  .image-container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    z-index: 1;
  }

  :deep(.n-image img) {
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }
}
</style>