someone explain file pathing to me please.
I’ll give an example of what I thought was right, but apparently isn’t because I just get the alt text.
Memory-card/src/lib/Content.svelte
Memory-card/assets/image.png
Below is in Content.svelte
<img src=“./assets/image.png” alt=“image”>
I also tried ../assets/image.png
The way I read the above is ./ goes back one, ../ goes back 2? So using the above example, ./assets/image.png probably wouldn’t work as it’ll be trying to locate assets inside lib, I think. And then ../ probably wouldn’t work because it’s trying to access assets in src? So do I go …/ or am I missing something here?
7 Replies
./ and is same dir
../ is back one
/ is root
Unless its a static folder for vite too you want your asset folder inside src/lib/
or rather just inside /src/ your repo looks like that is where it is too
I would also import img from '/src/assets/img.png' Like we went over the other day as a proper way in vite.
for things like favicon or other static images you use a folder /static/ (think its the same for just vite idk)Thanks b1
I will try and make the images work later now 🤣
Where did you get img from btw on the import, is it literally just the name for the img.png? So dog.png would be import dog from ‘/src/assets/dog.png and do i use this by doing {dog} inside my html/js?
img or dog is arbitrary in this case, and to use it, you use the variable in a src for an img tag: <img src={dog} alt="A cute dog"/>
you could just as easily import dog from '/src/assets/gerald.png'But that’s my confusion, excuse my ignorance but import dog from … does dog have to be the name of the image, or is that whatever you want it to be, you’re just naming the image import?
you're just naming it
it's not quite the same as a script import, where you do have to use the right name (or write
dog as cat or something if you want to use a different one)Ah ok fine, so that’s where I was gettting all tangled up. So import “name it something” from … is how it goes
Thanks Jochem
Yeah, for image imports that's accurate. No worries!