Search code examples
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} ... />