Help with Image component
Unanswered
Pacific saury posted this in #help-forum
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
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"
/>
James4u
where is your
NoahForma.jpg located?Pacific sauryOP
theyre both in the same folder
a folder called aboutme
Shayokh
kindly send a screenshot of your projects file structure
Pacific sauryOP
mb i went to sleep
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
Pacific sauryOP
ok this works but the image is like
super blurry
do i have to just
increase the size?
ok yeah
Pacific sauryOP
thank you!
Shayokh
No worries! Have fun building your app