DEV Community

Tea Reggi
Tea Reggi

Posted on

2 1

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?

Screenshot of deno deploy playground

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>]
Enter fullscreen mode Exit fullscreen mode

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!

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Image of Docusign

πŸ› οΈ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more