Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
dylan kane
2,772 PointsSomebody please help me put images in json!
I need to put images in json and ive been looking around the internet and reading things about base 64 and data uri but there have been no tutorials so I have no idea how to implement these concepts. help would be great!
4 Answers
Ken Alger
Treehouse TeacherDylan;
I'm not sure what exactly your question is and what your exact needs are, but you can convert images, such as .jpg, .bmp, .png, or .gif into a base64 string that you can quite easily store into a .json document. There are multiple free services out there that will convert the images into a data URI format, or you can do it through code.
Another common option is to store the location of an image inside your .json and then process the location for rendering.
Please post back with further questions.
Happy coding,
Ken
Ken Alger
Treehouse TeacherIt 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
dylan kane
2,772 Pointsgreat thats exactly what i needed. so let me just get this straight before I go out and butcher my db. First I have all my images in a set directory in my app, second I link to them in the json like your example above, and third all I do is call the object attribute and the image with be displayed?
Ken Alger
Treehouse TeacherThat's the theory.
The main reasons I'm not a big fan of storing images in a database is file size and performance. It is, in my experience, much better to store the images on a file server (which is what they are designed to do) and store information about the file in a database (which is what they are designed to do).
As an interesting task, google "jpg to Base64 converter". There are several out there, most of them free. Convert a jpg to Base64 and see the file size difference. It is often a 30+% increase is file size. Again, it depends on the application use case, but for me that is often a deal breaker.
Happy coding,
Ken
dylan kane
2,772 Pointsso the way im going here we wont have a huge file size difference? will the images in their directory be on a file server instead now?
Ken Alger
Treehouse TeacherFile size should be the same size you aren't altering the image files like you would by converting them to Base64. The only storage "hit" you will get is the .json file itself, if that is how you are going to store the access data. Images can be stored anywhere accessible, on the same physical server as your database and application, on a separate server, in the cloud, wherever, you just need to know the file path to get to it.
You could also, depending on your application, skip the .json file and store the data directly in the database. That would save a read operation to the .json document.
dylan kane
2,772 Pointsalright thanks so much for your help ken I really appreciate it. this forum is why i love treehouse so much!
dylan kane
2,772 Pointsdylan kane
2,772 Pointshey ken, thanks for answering yet another one of my questions! sorry if my question was vague. I'm curious as to how you would link to the location of your image file in json, could you provide an example? thanks again!