Hosting images as JSON 🤔

I've been tinkering around with Deno Deploy, a serverless edge provider for Typescript. Specifically using the playground feature, which gives you a single file editor on the left and a web browser on the right. Within this page you can pull in any Deno module. Deno created its own simple blog example which allow for deployment in a single file. I created a similar idea with ArborAnchor, a one-page route for creating a link-list page.

The downside of this is how are you supposed to add an image to your site, assuming you only wanted to use the playground, and not add a whole repo?

You can run this playground yourself here: https://dash.deno.com/playground/alpha-example-anchorarbor

This is where the concept of "Image to JSON" comes into play. With Deno you can easily import JSON and the html img tag supports base64 images, so putting these two things together it makes it so you can easily save an image or bunch of images to a single JSON file, put that anywhere on the web, and easily import it into your project.

The project is here https://github.com/reggi/image_to_json.

This is a command line utility that you can point at any image file or directory and it will add them all as an object to one JSON file.

deno run --allow-read --allow-write ./cmd.ts <imageOrDirectory> [<jsonFile>]

The script creates a JSON file, but ultimately you have to host this new file somewhere. I usually put it in a github gist. Why is image hosting so intimidating and cumbersome?

Check it out and let me know your thoughts!