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

<script lang="ts" setup>
import { getImageInfo } from '@/utils/functions'

defineProps<{
  extra: any
  data: any
  maxWidth?: Boolean
}>()

const img = (src: string, width = 200) => {
  const info = getImageInfo(src)
  if (info.width == 0 || info.height == 0) {
    return {
      width: 450,
      height: 298
    }
  }

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

  return {
    width: width,
    height: info.height / (info.width / width)
  }
}
</script>
<template>
  <section
    class="im-message-image"
    :class="{ left: data.float === 'left' }"
  >
    <tm-image preview :width="img(extra.url,450).width" :height="img(extra.url,450).height" :src="extra.url" />
  </section>
</template>
<style lang="less" scoped>
.im-message-image {
  overflow: hidden;
  padding: 20rpx 18rpx;
  border-radius: 16rpx 0 16rpx 16rpx;
  background-color: #46299D;
  min-width: 40rpx;
  min-height: 40rpx;

  &.left {
    background-color: #fff;
    border-radius: 0 16rpx 16rpx 16rpx;
  }
}
</style>