Result-Summary-Component-Main

Good job on the project:

• The images not loading when you statically insert the source to your img element is because of the different out put folder called 'dist' as you pointed out. The reason why now your imgs show up if you use import is because vite will consolidate all imports and change the path according to the new output build folder, in this case 'dist' (this will be different depending on which tooling you use: create-react-app, nextjs, etc.). You can tweak this by adding configurations to your vite config, i personally just put all my static assets in the public folder using this structure: /public/assets/imgs, but to each their own.

• Can't comment on the live server but vite already has a built in live preview, simply type 'npm run dev' (in my case i use yarn so 'yarn dev') and it will run the NON BUILT version of your project, if you would like to see the PRDOUCTION version(dist) it is 'npm run preview' after the build. Double check the 'scripts' section on your package.json. It is recommended to use these as vite already has HMR feature (Hot module replacement) which lets you update your app without a full refresh or restart of the development server, no need for third party, just copy paste or click the localhost url link provided by vite.

Goodluck on your journey fellow student.