My svg images doesn't render on Netlify building

Support
1

I’m using some svg images on my website, but it doesn’t load in production. The web server return 404 error, which means that trere is no one file to provide to my application. In my VSCode, everything works fine.

I noticed that when Netlify start to render my application (“rendering chunks…”), I can’t locate theses SVG images, so I think they won’t be available to load on the web browser.

My website is the https://lighthearted-mousse-818874.netlify.app/.

This is my building log:

Captura de tela de 2022-10-30 17-45-22
Captura de tela de 2022-10-30 17-45-22818×457 71.7 KB

Thanks for your attention.

2

Can you share the repository you are deploying from @imklein ?

3

Sure!

It’s the https://github.com/IgorKlein/01-to-do-list .

4

Thanks @imklein

The URLs for the images are suited for development, but not production. Check out Static Asset Handling | Vite

For example, src/components/Header.jsx was

import styles from './Header.module.css';

export function Header() {
    return (
        <header className={styles.header}>
            <img src="../src/assets/mainLogo.svg"/>
        </header>
    )
}

I changed this to

import styles from './Header.module.css';
import mainLogo from "../assets/mainLogo.svg"

export function Header() {
    return (
        <header className={styles.header}>
            <img src={mainLogo} />
        </header>
    )
}

I used the same method for the SVG in InputForm.jsx and TaskCard.jsx`. Then everything works in both development, and production.

Remember to build and test locally. Use something like serve or http-server e.g.

$ npm run build

# Vite build output here...
# then

$ npx serve -s dist
# OR
$ serve -s dist # if you have serve installed globally
5

Wow! That’s great!

Everything is working now.
Thanks for all!

Igor Klein.

6

Thanks for coming back and letting us know!