Thank you for your message!
I don't have such experience previously. I googled this question and not sure if this could help solve your problem:LINK. Thank your and have a good night.
Cheers!
The JSON format can contain only those types of value:
string
number
object
array
true
false
null
An image is of the type "binary" which is none of those. So you can't directly insert an image into JSON. What you can do is convert the image to a textual representation which can then be used as a normal string.
The most common way to achieve that is with what's called base64. Basically, instead of encoding it as 1 and 0s, it uses a range of 64 characters which makes the textual representation of it more compact. So for example the number '64' in binary is represented as 1000000, while in base64 it's simply one character: =.
There are many ways to encode your image in base64 depending on if you want to do it in the browser or not.
Note that if you're developing a web application, it will be way more efficient to store images separately in binary form, and store paths to those images in your JSON or elsewhere. That also allows your client's browser to cache the images.
edited Nov 28, 2018 at 11:26
answered Dec 27, 2015 at 22:27
It depends upon your application, storage system, etc. But let's just make up an example of needing to store company logos in a database to display on our website, obviously could be for a multitude of other reasons but that's what we'll run with.
You then should be able to easily navigate to lawnmower.logoLocation in your application language, get the file path, and display it. That part will largely depend on the language in particular and how your .json file is being generated, stored, and maintained.
You could also embed base64 images instead of the logoLocation field but that obviously increases file size greatly.
I saw you are learning React, and that's easy for you to show your pics using the second way you were described using React.
In the public folder you can add a directory assets/images, and then place all the images that you want to show in the front end, and you can display these images by using <img src="assets/images/YOUR_IMAGE.png" alt="" className="YOUR_CLASS_NAME"/> in some of your Component.js.
This is my mini demo which may help(see project-2 / project-4) Link.
This tutorial (for learning React) is the original resource for building the projects above. I think you can learn it step by step if you are available.
Cheers!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hello there,
Thank you for your message!
I don't have such experience previously. I googled this question and not sure if this could help solve your problem:LINK. Thank your and have a good night.
Cheers!
Thank you. I found this comment↓
The JSON format can contain only those types of value:
An image is of the type "binary" which is none of those. So you can't directly insert an image into JSON. What you can do is convert the image to a textual representation which can then be used as a normal string.
The most common way to achieve that is with what's called base64. Basically, instead of encoding it as 1 and 0s, it uses a range of 64 characters which makes the textual representation of it more compact. So for example the number '64' in binary is represented as 1000000, while in base64 it's simply one character: =.
There are many ways to encode your image in base64 depending on if you want to do it in the browser or not.
Note that if you're developing a web application, it will be way more efficient to store images separately in binary form, and store paths to those images in your JSON or elsewhere. That also allows your client's browser to cache the images.
edited Nov 28, 2018 at 11:26
answered Dec 27, 2015 at 22:27
lleaff
It think it means that I'll either have to convert it to binary 🙇♀️but converting it makes it larger.
I also found another one. I'll send it to you
Ken Alger
on Dec 28, 2015
It depends upon your application, storage system, etc. But let's just make up an example of needing to store company logos in a database to display on our website, obviously could be for a multitude of other reasons but that's what we'll run with.
{
"ebay" : {
"type": "online auction site",
"logoLocation": "../img/corporate/ebay.svg"
},
"treehouse" : {
"type": "online learning site",
"logoLocation": "../img/corporate/treehouse.jpg"
},
"lawnmower" : {
"type": "household gardening",
"logoLocation": "../img/personal/lawnmower.png"
}
}
You then should be able to easily navigate to lawnmower.logoLocation in your application language, get the file path, and display it. That part will largely depend on the language in particular and how your .json file is being generated, stored, and maintained.
You could also embed base64 images instead of the logoLocation field but that obviously increases file size greatly.
Hope that helps in some fashion.
Happy coding,
Ken
I don't know how the second one works. I guess I'll have to try it🙇♀️🙇♀️
I was considering using Supabase in the end.
🤷 Because how would I manage large images if I have to do this.
Also how do I add this to the a particular id
Hello,
Thank you for your message!
I saw you are learning React, and that's easy for you to show your pics using the second way you were described using React.
In the public folder you can add a directory assets/images, and then place all the images that you want to show in the front end, and you can display these images by using
<img src="assets/images/YOUR_IMAGE.png" alt="" className="YOUR_CLASS_NAME"/>in some of yourComponent.js.This is my mini demo which may help(see project-2 / project-4) Link.
This tutorial (for learning React) is the original resource for building the projects above. I think you can learn it step by step if you are available.
Cheers!