⚠️ Duplicated file name anywhere inside the src/ folder. Not Allowed?

[RealKendpr]

Does having similar file name inside and anywhere in the src/ folder not allowed?

I had a file structure kind of like this:

src/
    imgs/
        img.jpg
    posts/
        thumbnails/
                img.jpg
        post.md

the image inside the src/imgs/ is used by a component and the one inside the post/thumbnails/ is used by a post. I did it so the thumbnails are near the posts and to keep it organized.

it works fine on dev mode but when I deploy it and build, one of the images are not found. it seems only one of them are included after build.

[Fryuni]

This seems like a bug, not a Docs problem. I'm gonna transfer this to the core repo :)

Can you make a reproduction example?

[github-actions]

Hello @RealKendpr. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs repro will be closed if they have no activity within 3 days.

[RealKendpr]

I just made a reproduction:
Here is the Repositiory and the live site preview

[1574242600]

Two files with the same content and filename both ended up pointing to _astro/img.BwF0PSYI.jpeg after being processed by vite.

In box.astro, the image was imported and directly used within an <img> tag, bypassing the optimization process.
In contrast, box2.astro imported img2.mdx, where the image was referenced as ![Image 2](./thumbnails/img.jpeg), prompting Astro to optimize the image.

Astro did not recognize that the image was still being used by box.astro. After optimizing the image, it directly deleted _astro/img.BwF0PSYI.jpeg.

astro/packages/astro/src/assets/build/generate.ts

Lines 113 to 129 in 9a231a4

	if (
	!env.isSSR &&
	transformsAndPath.originalSrcPath &&
	!globalThis.astroAsset.referencedImages?.has(transformsAndPath.originalSrcPath)
	) {
	try {
	if (transformsAndPath.originalSrcPath) {
	env.logger.debug(
	'assets',
	`Deleting ${originalFilePath} as it's not referenced outside of image processing.`
	);
	await fs.promises.unlink(getFullImagePath(originalFilePath, env));
	}
	} catch (e) {
	/* No-op, it's okay if we fail to delete one of the file, we're not too picky. */
	}
	}

[RealKendpr]

Thanks for pointing out whats causing this.
And yes, this is whats happening, only one copy of image is remained.

Can having two copy of image be implemented?

But I think there is also an upside to this, since you are only using same file from the same path, the browser wont have to load the same image twice.
Or is it not the case with optimized and non-optimized image?

[RealKendpr]

Two files with the same content and filename both ended up pointing to _astro/img.BwF0PSYI.jpeg after being processed by Astro.

Also the generated file name for ![image 2] is the same of Image 1, but with extra few characters after optimization.
So I think the first image could just be left alone, and then just copy its name (+few extra characters) for the second optimized image.

[1574242600]

Also, may I ask why you chose to directly use the <img> instead of using the <Image /> component?

[matthewp]

@RealKendpr In the future please do not remove the form information that you filled out when filing the issue. Being able to quickly scan that makes it easier to triage a bug. Thank you.

[Fryuni]

There was no form information @matthewp. This started as a docs issue and I transfered it here.

[matthewp]

Oh ok, np then. My apologies @RealKendpr, I didn't realize this started as a docs issue.

[RealKendpr]

Also, may I ask why you chose to directly use the <img> instead of using the <Image /> component?

The <Image /> is great because of the optimization feature, but Im using the <img> tag inside a framework component.

Also I just discovered about passing the <Image /> in a framework component with named slots, stated here: Images in UI framework components

[RealKendpr]

Just an update to this issue

when using both regular html <img /> tag, and Astro's <Image /> component inside a .astro file both optimized and non-optimized image are included after a build.

inside box.astro

<div>
  <h2>Image inside the src/imgs/</h2>
  <img
    src={img.src}
    alt=""
  />
</div>

<div>
  <h2>Image inside the src/imgs, using the Astro's &lt;Image /&gt;</h2>
  <Image
    loading="lazy"
    src={img}
    alt=""
  />
</div>

also the same with using <img /> inside a framework component:

inside box.astro

<ComponentBox />

<div class="box">
  <h2>Image inside the src/imgs, using the &lt;Image /&gt;</h2>
  <Image
    loading="lazy"
    src={img}
    alt=""
  />
</div>

inside ComponentBox.tsx

import img from "../imgs/img.jpeg";
export function ComponentBox() {
  return (
    <div className="box">
      <h2>Image inside a react component</h2>
      <img src={img.src} alt="" />
    </div>
  );
}

[1574242600]

Astro uses the absolute path of image file before processing as a unique identifier when determining whether images is referenced.
It appears that all img objects are the same, so they point to the same absolute path of the image. As a result, the image is identified as referenced and is not deleted.