Hi! I recently just upgraded to V4 and my code was working fine, now i cannot use images the way i did before.
This is my ImageBlock.astro component.
---
import type { BaseInterface } from "../common/base.type"
import type { ImageTypes } from "../common/image.type"
interface Props extends BaseInterface, ImageTypes {
imageWidth: number
imageHeight: number
imageAlt: string
}
const { classVariant, imageUrl, imageWidth, imageHeight, imageAlt } =
Astro.props
import { Image } from "astro:assets"
---
<div
class="flex justify-center"
class:list={{
"w-full": classVariant?.includes("fullWidth"),
"!justify-start": classVariant?.includes("flexStart"),
"!justify-end": classVariant?.includes("flexEnd"),
}}
class:list={`!w-[${imageWidth}px] !h-[${imageHeight}px]`}
>
{
(
<Image
class:list={{
[`!w-[${imageWidth}px] !h-[${imageHeight}px]`]:
classVariant?.includes("any"),
"rounded-lg": classVariant?.includes("lgRounded"),
"rounded-full": classVariant?.includes("fullRounded"),
"w-full object-fit": classVariant?.includes("fullWidth"),
}}
width={imageWidth}
height={imageHeight}
src={imageUrl}
quality={100}
alt={imageAlt}
/>
)
}
</div>