Next.js Discord

Discord Forum

General questions

Answered
Mackenzie River Husky posted this in #help-forum
Open in Discord
Avatar
Mackenzie River HuskyOP
Hey everyone. I'm new to Next and coming off of normal React. I have a few questions that are probably really easy to fix but I can't seem to find any info in the docs or online about them.

To start, does you HAVE to use the Next <Image /> component? I would really rather not have t oset my w and h manually.

If no, how do I make a normal img tag function? If yes, how do I make the css I already made for the old img tag work on the <Image /> comp?

How does Next deal with video tags? I havea video I would like to play when the page loads up. No file path changes or googling have found a solution as to why the video simply will not work.

Thanks in advance for help with my stupid questions
Answered by codekrafter
1) No, it's just recommended
2) You can just use the normal <img /> JSX tag
3) Are you getting any errors? Next shouldn't really be doing anything special to video afaik
View full answer

29 Replies

Avatar
1) No, it's just recommended
2) You can just use the normal <img /> JSX tag
3) Are you getting any errors? Next shouldn't really be doing anything special to video afaik
Answer
Avatar
Mackenzie River HuskyOP
Let me boot it up and check for errors. I think it has something to do with the file path because I was having a hell of a time getting them correct in the first place
It's giving me the useContext one but I think it's been doing that the whole time
Image
Using the normal <img />, it only displays the alt. Using the exact file path I was importing into the <Image /> comp too lol
Avatar
Does it have a 404 error in the console?
Avatar
Mackenzie River HuskyOP
It does not, no
The only thing its screaming about is useContext
Avatar
What about the client console?
Avatar
Mackenzie River HuskyOP
Nope! Same thing
Wait im sorry im totally lying to you
It's throwing GET errors, I just didn't notice
On all of the images
All 500s
Avatar
Is it to localhost or somewhere else?
Avatar
Mackenzie River HuskyOP
localhost yeah
Avatar
Can you send the logs?
Avatar
Mackenzie River HuskyOP
Image
I'm not sure why it can't find the images that are saved in the project and not hosted anywhere else. It works when I import it with <Image /> but for some reason not with normal <img />
Avatar
what is the path to the image files and how do you use img (or Image) in the code?
Avatar
Mackenzie River HuskyOP
Here's the file structure
Image
File path
Image
Image
Same file path that works with the <Image />
Avatar
img src, just like Image src, needs to be the url path accessible from the browser
if you import ImgHeader like that, ImgHeader.src will be that url path
so use either
<img src="/media/drawlogoloop1.gif" />

or
<img src={ImgHeader.src} />
in next/image the .src part is not needed because it automatically detects whether the supplied src is an object and acts accordingly
Avatar
Mackenzie River HuskyOP
Wow im a dumb ass
Thanks a lot lol