jiuyiUniapp/jiuyi/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-image.vue

41 lines
1.0 KiB
Vue
Raw Normal View History

2024-12-18 15:46:27 +08:00
<template>
<div :class="['message-abstract-image-container']">
<img
:class="['message-abstract-image']"
:src="imageUrl"
>
</div>
</template>
<script setup lang="ts">
import { withDefaults, computed } from '../../../../../adapter-vue';
import { IImageMessageContent } from '../../../../../interface';
interface IProps {
messageContent: Record<string, unknown> | IImageMessageContent | undefined;
}
const props = withDefaults(defineProps<IProps>(), {
messageContent: () => ({}) as IImageMessageContent,
});
const imageUrl = computed<string>(() => (props.messageContent as IImageMessageContent).url || '');
</script>
<style scoped lang="scss">
@import "../../../../../assets/styles/common";
.message-abstract-image-container {
max-width: 100px;
max-height: 100px;
width: 100px;
height: 100px;
overflow: hidden;
background-color: #fff;
.message-abstract-image {
max-width: 100px;
max-height: 100px;
width: 100px;
height: 100px;
object-fit: contain;
}
}
</style>