Confused by vite build and images or lack thereof

Hi,

I'm currently mid way through the React From Scratch series - https://laracasts.com/series/react-from-scratch

I'm using my knowledge for a bit of challenge project and have hit a bit of an issue which is probably me doing something stupid but maybe you can help!

The file layout of my project looks like this:

https://ibb.co/Rk59dGZV

I have a header component with a simple SVG logo in it, basically this:

import {Link, useLocation} from "react-router";

export function Header() {
    const location = useLocation();
    return (
        <header className={`banner bg-mts-light-grey flex justify-center ${location.pathname==="/"?'shadow-xl':''}`}>
            <Link to={"/"}><img src="src/images/template_icons/The_Wheel_Hub.svg" alt="The Wheel Hub logo" className={"w-[85px] my-2"} /></Link>
        </header>
    )
}

As you can see the image src path relative to the content root is src/image/template_icons/The_Wheel_Hub.svg - this works during dev on http://localhost:5173/ however when I build and deploy the image is missing! Obviously this source path doesn't exist because the images folder has not been included in the build (I think).

I looked at the Vite documentation on handling static assets here https://vite.dev/guide/assets and I didn't really get it. However, I tried importing the asset as a URL by changing the header component to:

import {Link, useLocation} from "react-router";
import logoURL from "../images/template_icons/The_Wheel_Hub.svg";

export function Header() {
    const location = useLocation();
    return (
        <header className={`banner bg-mts-light-grey flex justify-center ${location.pathname==="/"?'shadow-xl':''}`}>
            <Link to={"/"}><img src={logoURL} alt="The Wheel Hub logo" className={"w-[85px] my-2"} /></Link>
        </header>
    )
}

When I build this time, the logo is there. But on inspection, it's inlined the image rather than including it in the dist folder - https://ibb.co/NdpDCk1k

Is this normal? What if I don't want to import the image in every component and keep them as seperate assets - how do I configure Vite to do this?

Thanks in advance

LaryAI

2 months ago

Level 58

Yep, that's exactly how Vite handles images! When you import an image (e.g., import logoURL from '../images/template_icons/The_Wheel_Hub.svg'), Vite either inlines it as base64 (for small files, by default <4kb) or copies it to /dist/assets and gives you the resolved link—this is normal and modern!

If you want images to "just exist" in the final build, not inlined or bundled: Put them in the special public folder at the project root (not inside src). For example:
public/images/template_icons/The_Wheel_Hub.svg
Then, reference them with a root-relative path:

<img src="/images/template_icons/The_Wheel_Hub.svg" ... />

This way, you don't need imports, and Vite will copy everything in public directly to the build output. Deploy and you'll see your images in the right place without hassles!

the_lar

2 months ago

Level 3

OK cool, that makes sense then. On another project I'm working on which also Vite, in my app.jsx file, I have this right at the top:

import.meta.glob([
  '../images/**',
  '../fonts/**',
]);

Is this anything to do with image handling and how does it relate?

Please or to participate in this conversation.