Cannot load images if not declared

[dwr-studio]

Hello, I’m missing something here.

I want to display an image, let’s say inside the <MainLayout> in index.astro.

This is the code:

  <Image
    class="absolute lg:left-10 sm:left-5 -z-[1] -translate-y-1/2"
    src="/src/images/automated-tools.avif"
    height={126}
    width={126}
    alt=""
  />

When I run npm run dev, I can see the image correctly displayed. However, when I run npm run build and then npm run preview, the image is not displayed and is marked as not found. The final HTML looks like this, with the image’s absolute path preserved:

<img src="/src/images/automated-tools.avif" class="absolute lg:left-10 sm:left-5 -z-[1] -translate-y-1/2" alt="" width="126" height="126" loading="lazy" decoding="async">

Instead, I should see something like this:

<img src="/_astro/automated-tools.NvGNhe84_2g2652.avif" class="absolute lg:left-10 sm:left-5 -z-[1] -translate-y-1/2" alt="" width="126" height="126" loading="lazy" decoding="async">

I know you can declare it like this import tools from "@images/automated-tools.avif"; but what I want to achieve is showing the images coming from a piece of .jsx code that renders a Swiper slider. These images are fetched from a index.md file.

I paste here a piece of the Swiper code, running perfectly when npm run dev:

import { useRef, useState, useEffect } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Pagination, Navigation } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import "swiper/css/autoplay";

<Swiper>
    {list.map((item, i) => (
      <SwiperSlide key={`feature-${i}`}>
        <div>
            <img src={item.image} alt={item.title} />
        </div>
      </SwiperSlide>
    ))}
</Swiper>

Then, I created a component ProductsSlider.astro:

---
import ProductsSlider from "@function-components/ProductsSlider";
const { key_products } = Astro.props;
const { title, description, product_list } = key_products;
---

<section>

      <ProductsSlider list={key_products.product_list} client:load />

</section>

The data is fetched from the corresponding .md file:

key_products:
  title: Title
  description: Desc
  product_list:
    - title: Product 1
      image: "src/images/products/product-1.png"

Finally I can retrieve the localized data from the index.astro file:

import ProductsSlider from "@components/sections/landing/ProductsSlider.astro";
import { getEntry } from '@/config/getEntry';

const locale = Astro.url.pathname.startsWith('/fr') ? 'fr' : 'en';

const homepageContent = await getEntry('homepage', `${locale}/index`);

let { key_products } = homepageContent!.data;
key_products = homepageContent!.data.key_products;
---

<MainLayout>

  <ProductsSlider key_products={key_products} />

</MainLayout>

The images inside the slider does not show after build as the src is incorrect. Can you point me to the right direction?

Thanks 🙏

[mearashadowfax]

Hello @dwr-studio! Quick question before we dive deeper: where are the images located in your project? Based on your code, it seems Astro is looking for the image in public/src/images/automated-tools.avif instead of the src/ directory. If the images are in the src/ directory, we might need to adjust the markdown file to use relative paths correctly or consider moving the images to the public directory. Let me know, and we can investigate further.

[dwr-studio]

@mearashadowfax, thanks for taking the time to respond! The images are located in src/images.

I've adjusted the markdown file to use the relative path and now I can see the images after building.