You need to either set the width & height of the image in the height and width props or use fill to let the image fill it. Keep in mind, when using fill props on the image it will be automatically positioned absolute, so wrap your image in a relative container

noted, thank you

no. only when you import the image statically would width and height not be necessary. and thats what i'd recommend (and that doesnt require putting in the public folder). don't put the image in the public folder if you don't need to

i specified the width, but it's still asking me to get the height

yes both width and height are required unless you import the image

i get a module not found error when i do this

how do you import it?

it felt like a very makeshift solution so i wanted to understand where i'm going wrong
but yes, this does work

no it's not a makeshift solution, it is the officially recommended way to load local images https://nextjs.org/docs/app/building-your-application/optimizing/images#local-images

in a typical nextjs app, you only need to use the public folder for a small number of things. images, fonts and such need not be stored there

i see, i was under the impression that the logos would also be stored there

it's working now, thank you very much