Possible to turn an image into a prop in svelte?
Messing around with Svelte and have setup a gallery using the same image but will css/svelte it differently for each image (is this possible).
Wondered if it was possible to save that image as a prop, so instead of having to do img src="" .... I can do <div>{img}</div> etc...
I wanted to mess around with each image differently, would that then be possible with the single prop, assuming what I'm messing with is the div containing that image, and not the propped image itself?
70 Replies
What is the end result you want, I'm not clear on what you mean.
So take this hideous picture right now
Because you are in vite ecosystem you want to import the asset anyway so vite will handle cache for you
ah, hmm
basically, is there a better way than doing
for repetitive use of the same image
Right but you said you want to "mess with each one differently"
So are you wanting to make a <Image> component that you pass a asset into?
https://vitejs.dev/guide/assets
I was looking to css each image, so animation/transition etc etc..
I'm just winging it man, lmao
import imgUrl from './img.png' is how you should use the img
then you would have src={imgURL}
You can also glob them in an array and use {#each images as img}
or what not.
https://vitejs.dev/guide/features.html#glob-import
also have https://vitejs.dev/guide/features.html#dynamic-import
This is basically how you would want it unless you were handling cache on the proxy server.
or if your host handles it for you.
Nothing wrong for using the /static/ folder for assets either just realize that they won't get the cache headers from Vite.slow down there cowboy, im still trying to import the fucking image LOL
I'm just showing you the methods vite uses
You only have to know they exist not how to use them xD
gotcha
SvelteKit goes into this too on their docs
https://kit.svelte.dev/docs/images#vite-s-built-in-handling
Because its basically just a vite plugin so even if you are using it same thing.
Understood, I'll try read, I'm struggling with the most basic shit atm, thanks for the links!
I have not used <enhanced:img> yet but looks legit 😄
I mean, I thought let src = '../assets/images/image.jpg'; would work, but apparently not
mmm I wouldn't use src
name it something better 😄
never use namespaces that are used by html/css/js
bad habit to get into and just spells disaster
i can change the name when the damn thing works lol
but if its not an allowed namespace it will not work sir
(i changed the name, it doesnt work)
so best to just not in the first place right 😄
share the full code or demo
I'm gonna have to ask you here because I'm clearly missing something simple here
Ok pretty clear mistake ya?
You really gotta think about this one
cause its important you understand what you are doing here.
what does
let fleur return?uhh... a link, but I know it's wrong, I just can't remember how I'm supposed to do it
well, it's supposed to be a link, it's not
From proper naming you have what
import imgUrl from './img.png'
a link or ... what?
like what is it at its core in JS
I created a variable
typeOf(fleur)
So two things going wrong here you are not using the right syntax as above for a Vite import
Either way you are still just returning a string
So <div> '../folder/path'</div> would be the result
I mean I tried this but it also didnt work
So how would you use the string in html? not alone but in a <img src={imgUrl} />
Not a clue mate, literally not a clue
Also.. you img is not in that path? but in /public?
you don't have /assets/ exapanded so I can't tell if its duplicated there.
oh sorry i just moved it there now
so it's in assets/fleur.jpg right now
Does vite allow for syntax like this?
in React it then allows <div><Selfie/></div>
What the cursed .... 😄
So you are making a component from a svg? But why 🤷♂️
use directly as a named component, no mix ups, no src.
I just stumbled upon it recently, and it does seem like what the original question is hinting at
how to do imports number 11,536
That seems like such a bad pattern to me
so it creates a <img src> for you?
what props does it take as a ReactComponent by default? does it pull height/width for you?
I mean, I literally just want to import an image to use as {fleur}
that's it
https://kit.svelte.dev/docs/images#vite-s-built-in-handling
Linking it again xD
You can make that a <Img> component and just pass in the import url too from the base component. You would then use vites dynamic import (with the prop name in the url)
not this ugly probably but lol
that is a <Picture> comp I made quickly just to srcset easily in a project.
Oh I kinda break my own rule here to because Svelte shorthand... If you do name the prop the same as the attribute you get to use the shorthand >.>;;
vs writing out height={height} etc
what in the heck is going on here
/me reads
You got me really curious now do you have any documentation to link about this?
is SFO lying to me?
Oh I wonder if its only svg's cause its returning the actual .svg code as a componentn 🤔
I linked you actual docs why are you on SO
...
this was before your link
well xD
All that is doing is saving a string to a variable
then reusing the string
You get me?
I get that
Where as importing via Vite is creating an asset it will handle as such.
For some reason I thought it was that simple to do this, but your answer says it's a little more to it
my little autistic brain is trying to wrap it's dumbass mind around this
lmao
You can do it either way just understand what you are doing via each.
React typically does it the same way too (specially in vite)
you want to import imgURL from 'path'
ok so I have the variable way working.. I just now need to get my head around your way
Also why one you need to have in a static/public path and the other you are importing from src 😉
Otherwise you might have issues during build 🤷♂️
hmm, true
Well, sounds like I need to go back to learning basic html
imports and paths are just a bit messy at first.
the fact you were just putting a string into a div maybe so 😄
na you just gotta think about what you are doing more
bit worrying no? 3 years of "studying" and I can't even do this shit 😄
anyway, thanks
Look you keep leaving it... and learning all this other wack o mole shit? Can you even say 3 years if you don't actually focus on the web most the time 😄
I've been learning CSS/HTML for 3 years, more so than JS
But its all I really focus on... nothing else.
My end goal is building websites... I build websites and learn how to build them better as I go 😄 but its ALL I DO
Party why I suck at design anymore... cause I don't practice it hardly at all. Where 20 years ago it was what I did more, but I was not as good as coding.
Feelme?
I mean, I just have no path of where I'm going, so I literally just make shit up every day I start studying, so it's a repetitive cycle of bollocks, anyway we're straying off-topic here, import my damn image 😄
Srry I just hate when you start stank thinking (stap it)
I've become MD
the Scottish version
Na not even close but don't get lost in what you wanna do
I don't say this in like a "woah pitty me" way btw
lol feels
I say it in a way like "shit, do I have the fucking time and mental capacity to actually keep this up" lol
If it makes you feel better I don't import images proper on my folio 😄 cause I'm pulling from a .json file as "database"
Took me awhile to realize they were not cached because of this 😂 but I've had lots of prior knowhow to even notice that right? lol
I have no idea why I'm even doing this hahahaha
What's the plan CDL, where ar eyou going with this
🤷♂️ only you know that answer, I'd hope you enjoy it though. 🤘
This is slightly on topic
but
hey
i imagine i cant fill this div with the image without it skewing the image right
because it's not a square image
You would want to use object-fit probably
or more to my style you let your content determine size as much as possible 😄
Yeah fair, I think I was originally trying to copy the youtube layout
which has everything the same sized box
yup in that case you would want to fit
aight il try get the hang of it, doesnt work initially, but i think its due to targetting
infact, it definitely is, I was doing object-fit on the div, not the image