Next.js Discord

Discord Forum

General questions

Answered
Mackenzie River Husky posted this in #help-forum
Open in Discord
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

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
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
Using the normal <img />, it only displays the alt. Using the exact file path I was importing into the <Image /> comp too lol
Does it have a 404 error in the console?
Mackenzie River HuskyOP
It does not, no
The only thing its screaming about is useContext
What about the client console?
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
Is it to localhost or somewhere else?
Mackenzie River HuskyOP
localhost yeah
Can you send the logs?
Mackenzie River HuskyOP
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 />
@Mackenzie River Husky Click to see attachment
what is the path to the image files and how do you use img (or Image) in the code?
Mackenzie River HuskyOP
Here's the file structure
File path
Same file path that works with the <Image />
@Mackenzie River Husky File path
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
Mackenzie River HuskyOP
Wow im a dumb ass
Thanks a lot lol