JavaScript

dylan kane
dylan kane
2,772 Points

Somebody 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
STAFF
Ken Alger
Treehouse Teacher

Dylan;

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

dylan kane
dylan kane
2,772 Points

hey 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!

Ken Alger
STAFF
Ken Alger
Treehouse Teacher

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

dylan kane
dylan kane
2,772 Points

great 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
Ken Alger
Treehouse Teacher

That's the theory. :wink:

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
dylan kane
2,772 Points

so 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
Ken Alger
Treehouse Teacher

File 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
dylan kane
2,772 Points

alright thanks so much for your help ken I really appreciate it. this forum is why i love treehouse so much!