what you described is how the path works on the browser, for things like the src prop of the img tag

when you use import in Node, you are using the file path which is a completely different thing, you need to locate where the current file is located at and work your way up to the public folder using ../, e.g. import foo from '../../public/placeholder.jpg'

I see, so I know the absolute path works but when looking at the docs, it shows I only need the / so what am I missing here about Node? Sorry I lost you

can you link the page of the docs that use the /?

Statically importing

So I don't need to worry about the w and h

it is not the same thing as /me.png, which means to look for the me.png file in the root of the system (you should basically never need to do this)

if you are statically importing an image it doesn't need to be on the public folder

Oh! I see now

I think a lot of posts like this were confusing me

So the image shouldn't be in public, but the component folder or something?

This is my structure

So the image shouldn't be in public, but the component folder or something?

it is up to you where they will be located, as long as you use the correct import path it will work

in this specific case of the docs the image is located on the same folder as the component file, so ./foo.jpg works

some of the answers are using the file path and others the browser path, I highly recommend you to search about their differences because this a very important fundamental

I see! I think the docs in conjunction with me misunderstanding posts made me misunderstand

Sounds good, I get it now! Thank you so so much

I'm running into an issue with styles not being applied when deployed. Could this be related to the pathing issue I had before? I'm using tailwind and daisyUI so I don't know where that path would have gotten corrupted 😦