cssreactjsbuildviteassets

Assets not showing after build process in Vite and React


When running npm run build my pictures under src/assets/... are not available in the dist directory / production build. So not shown on the site. In dev mode it works for sure.

Any ideas on how to make them available after building?

Also, in my VSCode terminal, i get the the error that

"GET /src/assets/store2.webp" Error (404): "Not found"

    <div className="onah">
      <img src="src/assets/Deal-2.webp" 

I have attached some screenshots for a better understanding. I even had to configure my vite.configscreenshot

Screenshot2


Solution

  • You should import the asset so vite could manage it and build it for production, instead of:

      <div className="onah">
         <img src="src/assets/Deal-2.webp" 
    

    you should do:

      import deal from "src/assets/Deal-2.webp";
    
      <div className="onah">
        <img src={deal} ... />