i want to conditionally import an image
Answered
Harlequin posted this in #help-forum
HarlequinOP
i have a component Achievement.tsx
in the props i have an {id}:{id:number}
and a folder with images
i want to conditionally import one of the images depending on the id provided.
notes : i am doing a desktop app with tauri, so i want the most optimised way where i decrease the loading time
in the props i have an {id}:{id:number}
and a folder with images
i want to conditionally import one of the images depending on the id provided.
notes : i am doing a desktop app with tauri, so i want the most optimised way where i decrease the loading time
15 Replies
@Harlequin i have a component Achievement.tsx
in the props i have an {id}:{id:number}
and a folder with images
i want to conditionally import one of the images depending on the id provided.
notes : i am doing a desktop app with tauri, so i want the most optimised way where i decrease the loading time
you can create that by passing in the id with the url to the image. It could look like this:
Like that you only import the single image, that you really need
<Image src={`/img/${id}.png`} />Like that you only import the single image, that you really need
@B33fb0n3 you can create that by passing in the id with the url to the image. It could look like this:
tsx
<Image src={`/img/${id}.png`} />
Like that you only import the single image, that you really need
HarlequinOP
will this be the optimal thing for a local desktop app,
- will it work if i use the "@/..." path
- i thought in react you need to import an image to use it
- will it work if i use the "@/..." path
- i thought in react you need to import an image to use it
will it work if i use the "@/..." pathI don't think so, but maybe it will be correctly replaced. Try and see
i thought in react you need to import an image to use itno you don't need to. That would be nearly impossible when the image is hosted somewhere else
Sphecid wasp
There are components out there that will allow you to pass a binary blob of an image, I think that's what you're thinking about regarding "importing" it. Otherwise, if they're in a public folder, you can craft the URL to point to it and that should work also.
I think what happens behind the scenes is that React or whatever framework you're using converts the image to base64 then passes that to the src property and the browser will decode the base64 string or something. But you can also just point it to the public/assets folder.
@Sphecid wasp I think what happens behind the scenes is that React or whatever framework you're using converts the image to base64 then passes that to the src property and the browser will decode the base64 string or something. But you can also just point it to the public/assets folder.
what actually happens is, that the browser reads the url and downloads the file. After that it can be referenced and displayed by the browser
@B33fb0n3 what actually happens is, that the browser reads the url and downloads the file. After that it can be referenced and displayed by the browser
Sphecid wasp
<img src="data:image/png;base64,iVBORw0KG..." /> this is what I'm talking about. I believe this is what happens when you import an image in React.
HarlequinOP
@B33fb0n3
Sphecid wasp
What does data.img resolve to?
@Sphecid wasp What does data.img resolve to?
HarlequinOP
a name of one of the images in the folder
@Harlequin Click to see attachment
Remove the dot
Answer
@B33fb0n3 Remove the dot
HarlequinOP
i removed the dot and put the images in the public folder and it worked