fix(web): add dimension reservation to ImageEmbed component
This commit is contained in:
@@ -10,12 +10,16 @@ export function ImageEmbed({ embed }: ImageEmbedProps) {
|
|||||||
const openImagePreview = useUIStore((s) => s.openImagePreview);
|
const openImagePreview = useUIStore((s) => s.openImagePreview);
|
||||||
const imageUrl = embed.image ?? embed.url;
|
const imageUrl = embed.image ?? embed.url;
|
||||||
|
|
||||||
|
const style: React.CSSProperties = embed.width && embed.height
|
||||||
|
? { aspectRatio: `${embed.width}/${embed.height}`, maxWidth: Math.min(embed.width, 400), maxHeight: 300 }
|
||||||
|
: { aspectRatio: '4/3', maxWidth: 400, maxHeight: 300 };
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mt-2">
|
<div className="mt-2 rounded-lg overflow-hidden bg-surface-input" style={style}>
|
||||||
<img
|
<img
|
||||||
src={imageUrl}
|
src={imageUrl}
|
||||||
alt={embed.title ?? ''}
|
alt={embed.title ?? ''}
|
||||||
className="max-w-[400px] max-h-[300px] object-contain rounded-lg cursor-pointer hover:opacity-90 transition-opacity"
|
className="w-full h-full object-contain rounded-lg cursor-pointer hover:opacity-90 transition-opacity"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
referrerPolicy="no-referrer"
|
referrerPolicy="no-referrer"
|
||||||
onClick={() => openImagePreview(imageUrl)}
|
onClick={() => openImagePreview(imageUrl)}
|
||||||
|
|||||||
Reference in New Issue
Block a user