While working on my app, I encountered a problem. In my code, I have the following line:
<img
class="h-full w-full object-cover"
src="../assets/img/loginSignUpForms/Login.PNG"
alt=""
/>
However, I received a strange error message:
1: PNG
2: →
IHDR♥▬♥♠1Z☺sRGB∟♦gAMA♂a♣ pHYs♫♫☺odIDATx^mQs⌂5M#}E▲ew☻K ...
^
4: A:`♫?sc}♣oXҍF|- W▲:‼_ϗp<⌂gܦ~♂x↨<☺d‼d>:qyd♥.→Y9l+ ?҅?...
23~_⌂[... ∟↔▲0♂ׄhMX♂dh$iaXp▬E♥§DҺL_{oqU♦G}▬C%7u⌂rm<ՃQ|>
error during build:
Error: Parse error @:3:106
at parse$e (file:///C:/Users/user/Desktop/JSQuizz/client/node_modules/vite/dist/node/chunks/dep-52909643.js:16497:355)
at Object.transform (file:///C:/Users/gofrf/Desktop/JSQuizz/client/node_modules/vite/dist/node/chunks/dep-52909643.js:46653:27)
After researching, I learned that I should move the image to the public directory in my project. So, the corrected image code looks like:
<div name="left" class="w-[100%] lg:w-[50%]">
<img class="h-full w-full object-cover" src="/Login.PNG" alt="" />
</div>
However, now I am facing a different error:
[vite]: Rollup failed to resolve import "/Login.PNG" from "C:/Users/user/Desktop/JSQuizz/client/src/views/LoginAndSignIn.vue".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "/Login.PNG" from "C:/Users/gofrf/Desktop/JSQuizz/client/src/views/LoginAndSignIn.vue".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to