Open RealKendpr opened 2 weeks ago
This seems like a bug, not a Docs problem. I'm gonna transfer this to the core repo :)
Can you make a reproduction example?
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.
I just made a reproduction: Here is the Repositiory and the live site preview
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
.
https://github.com/withastro/astro/blob/9a231a4dd7e14ecb9cb95842060a4a24e4c03f02/packages/astro/src/assets/build/generate.ts#L113-L129
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?
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.
Also, may I ask why you chose to directly use the <img>
instead of using the <Image />
component?
@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.
There was no form information @matthewp. This started as a docs issue and I transfered it here.
Oh ok, np then. My apologies @RealKendpr, I didn't realize this started as a docs issue.
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
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 <Image /></h2>
<Image
loading="lazy"
src={img}
alt=""
/>
</div>
<img />
inside a framework component:inside box.astro
<ComponentBox />
<div class="box">
<h2>Image inside the src/imgs, using the <Image /></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>
);
}
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.
Does having similar file name inside and anywhere in the
src/
folder not allowed?I had a file structure kind of like this:
the image inside the
src/imgs/
is used by a component and the one inside thepost/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.