GET http://localhost:5173/src/assets/images/splash/splash_desktop_reduce_size_02a_noClip.riv?import net::ERR_ABORTED 404 (Not Found)

Question

Is there anyone who can help me with this issue? I have created a React app with Vite, the Next Generation Frontend Tooling. In the network tab, it is showing me a 404 error, and I think the icon is not loading. Do I need to make changes in the Vite config, or is there something else I should do?

Splash.jsx:

import React, { useEffect } from 'react'
import { useNavigate } from "react-router-dom";
import Rive, { Fit } from "@rive-app/react-canvas";
import Mandala from "@/assets/images/splash/Mandala_back.svg";
import icon from "@/assets/images/splash/splash_desktop_reduce_size_02a_noClip.riv";
import "./splash.scss"

const Splash = () => {
    const navigate = useNavigate();

    useEffect(() => {
        setTimeout(() => {
            navigate("/languageselector");
        }, 5000);
    }, [])

    return (
        <div className="splash " style={{ overflowY: "hidden" }}  >
        
            <div className="splash-cont ">
                <div className="splash-cont-front ">
                    <img className="ml-3" style={{ width: "102.5%", height: "102.5%" }} src={Mandala} alt="mandala" />
                    <Rive
                        src={icon}
                        animations={"splash_logo_start"}
                        fit={Fit.Contain}
                        className="splash-cont-front-logo"
                    />
                </div>
            </div>
        </div>
    )
}

export default Splash