Static files are not rendering in Electron Forge vite-typescript plugin

34 Views Asked by At

I am using Electron Forge's vite-typescript plugin to build a desktop application. I want to add some images to the dApp but they are not rendering. I keep getting a Failed to load resource: net::ERR_FILE_NOT_FOUND error. My file structure is as follows:

project
│   README.md
│   index.html    
│   next.config.js
│   forge.config.ts
│   forge.env.d.ts
│   package.json
│   postcss.config.js
│   tailwind.config.js
│   tsconfig.json
│   vite.base.config.ts 
│   vite.main.config.ts 
│   vite.preload.config.ts 
│   vite.renderer.config.ts 
└─── public
│   │   image1.jpg
│   │   image2.jpg
│   │   index.css
└───src
    │   _app.tsx
    │   index.tsx
    │   main.js
    │   preload.js
    │   renderer.ts

My images are located in public and as per vitejs documentation, the files in the public folder should be automatically copied to the root of the app folder.

I reference them as follows in my index.tsx:

<div><br></br>
  <center>
    <img style={{ borderRadius: '5%' }} src="/image1.jpg" width="500px" height="300px"/>
  </center>
</div>

When I do npm run start, my assets do not contain the images. I also noticed that my .vite folder is not getting updated at npm run start or npm run make. Could that be causing the issue?

0

There are 0 best solutions below