55 lines
1.1 KiB
Vue
55 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { proxyImage } from '@/lib/proxyImage';
|
|
import type { ThreadMessage } from '@/types/dredge.types';
|
|
|
|
defineProps<{
|
|
message: ThreadMessage;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="message.attachments?.length"
|
|
class="message-media"
|
|
:class="{ 'message-media--grid': message.attachments.length > 1 }"
|
|
>
|
|
<a
|
|
v-for="(attachment, i) in message.attachments"
|
|
:key="i"
|
|
:href="attachment.url"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<img :src="proxyImage(attachment.url)" alt="" class="message-media__image" />
|
|
</a>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.message-media {
|
|
display: flex;
|
|
}
|
|
.message-media > a {
|
|
display: block;
|
|
line-height: 0;
|
|
}
|
|
.message-media__image {
|
|
display: block;
|
|
max-width: 220px;
|
|
max-height: 320px;
|
|
border-radius: 10px;
|
|
object-fit: cover;
|
|
}
|
|
.message-media--grid {
|
|
flex-wrap: wrap;
|
|
gap: 0.3rem;
|
|
max-width: 220px;
|
|
}
|
|
.message-media--grid .message-media__image {
|
|
width: 105px;
|
|
height: 105px;
|
|
max-width: none;
|
|
max-height: none;
|
|
}
|
|
</style>
|