#Importing Image In A Array Of Objects In Astro Server Gives Me A Error

2 messages · Page 1 of 1 (latest)

fervent plover
#

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>
#

This is my index.astro

---
import Layout from "../layouts/Layout.astro"

import Hero from "../components/Hero.astro"
import Section from "../components/Section.astro"
import myImage from "../assets/laptop.jpg"

const Benefits = [
  {
    title: "Very Good Template.",
    content: "You'll like it.",
    imageUrl: myImage,
    imageAlt: "",
  },
  {
    statement: "This Is A Statement",
    title: "Good Template.",
    content: "You'll like it.",
    imageUrl: myImage,
    imageAlt: "Yes",
  },
  {
    statement: "This Is A Statement",
    title: "Good Template.",
    content: "You'll like it.",
    imageUrl: myImage,
    imageAlt: "Yes",
  },
]

const HeroContent = {
  title: "This is a very good variant-based template.",
  secondaryTitle: "Example",
  content: "You'll like it.",
  imageUrl: myImage,
  imageAlt: "Yes",
}
---

<Layout
  title="Landing Page and Institucional Site template."
  description="A dynamic Astro SSG template to help freelancers around the world."
>
  <Hero variant="hero-six" hero={HeroContent} />
  <main class="px-6 md:max-w-5xl m-auto">
    <Section variant="section-eleven" section={Benefits} />
  </main>
</Layout>

The laptop.jpg image is inside src in the folder "assets" and i tried importing it into my object but i get "[LocalImageUsedWrongly] Image's and getImage's src parameter must be an imported image or an URL, it cannot be a string filepath. Received ./laptop.jpg."