Help with Image component
Unanswered
Pacific saury posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Pacific sauryOP
I'm trying to convert the img to an Image component so that it works with vercel, could someone please help?
<div className="flex w-1/2 h-full">
<img src="" alt="" className="w-1/2 rounded-xl mr-2"/>
<div className="w-1/2 ml-2">
<div className="text-6xl font-medium pb-1"></div>
<p className="">blah blah blah blah
<br></br>
<br></br>
</p>
</div>
</div>
19 Replies
Kindly check out the docs
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Pacific sauryOP
yeah i did but i keep getting an error when i try and import the image locally that says
Module not found: Can't resolve './NoahFormal.jpg'
Module not found: Can't resolve './NoahFormal.jpg'
im importing the image like this
import NoahFormal from "./NoahFormal.jpg";
<Image
src={NoahFormal}
alt="Formal Image of Noah"
className="object-center w-1/2 rounded-xl mr-2 h-auto object-contain"
/>
![Avatar](https://cdn.discordapp.com/avatars/970430299014041630/67ed5d89794ffddd3013aed9662f3649.webp?size=256)
James4u
where is your
NoahForma.jpg
located?![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Pacific sauryOP
theyre both in the same folder
a folder called aboutme
![Avatar](https://cdn.discordapp.com/avatars/948533966418354186/cddc950ff0196dc14b1364576dd85e1a.webp?size=256)
Shayokh
kindly send a screenshot of your projects file structure
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Pacific sauryOP
![Image](https://cdn.discordapp.com/attachments/1266181724556099684/1266454539205214300/image.png?ex=66a53533&is=66a3e3b3&hm=9d4f2963ecfca0759e2c04ac63fa5bde042e8aea83a6cbecf1b2117548780f11&)
mb i went to sleep
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Black-throated Blue Warbler
import Image from 'next/image';
<Image
src={'/NoahCasual.png'}
alt="Formal Image of Noah"
className="object-center w-1/2 rounded-xl mr-2h-auto object-contain"
width={100}
height={100}
/>
Need to move your NoahFormal image to the public folder
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Pacific sauryOP
ok this works but the image is like
super blurry
do i have to just
increase the size?
ok yeah
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Pacific sauryOP
thank you!
![Avatar](https://cdn.discordapp.com/avatars/948533966418354186/cddc950ff0196dc14b1364576dd85e1a.webp?size=256)
Shayokh
No worries! Have fun building your app