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?