astrojs

Astro build keeps a copy of the image and video assets in the root of the dist directory


On build, yarn build, I end up with a /dist/_astro directory with everything as expected--css, js, img, mp4, etc. However, I also have all the images and videos for my site in the main /dist directory. Basically a copy of everything in the /public directory.

How can I use build, reference my images and videos in my pages, and build without having a duplicate of them which doubles my website size.


Solution

  • Keep your images/videos in /public and reference them with absolute paths starting with /:

    <img src="/images/photo.jpg" alt="Photo" />

    <video src="/videos/clip.mp4" />

    Don't import them. Just reference the path. The files in /public are copied as-is to /dist, so /public/images/photo.jpg becomes /dist/images/photo.jpg.