getJsonAndRenderAsImage

Shows how to get a JSON object containing a base64 imaged stored in Val Town blob storage and render it as an image in the DOM with React.

Make sure you have a JSON object named image-test in your Val Town blob storage (alternatively, you can change the key name in the blob getter in the script).

The object should look like this:

{
  "image": "base64stringgoeshere"
}

To easily upload an image to your blob storage, fork this val, run it, and enter your API key in the password input.

1. Fetching the JSON:

• The client-side React component makes a fetch request to "/image".
• This request is handled by our server function.

2. Server-side handling:

• The server function calls blob.getJSON("image-test").
• This blob.getJSON() method makes an HTTP request to the Val Town API.
• The API returns a Response object containing the JSON data.

3. Processing the blob on the server:

• We receive this Response object from blob.getJSON().
• We don't need to extract the data on the server side.
• We can directly return this Response object to the client.

4. Sending the response to the client:

• We set the appropriate "Content-Type" header (e.g., "application/json").
• We return the Response object to the client.

5. Client-side handling:

• The fetch request in the React component receives the Response.
• We call response.json() to parse the JSON object from the Response.

6. Creating a data URL:

• We extract the image data from the JSON object at data.image.
• We prepend the data URL prefix to the image data.
• This data URL is a base64-encoded string representing the image.

7. Updating the React state:

• We set the data URL as the state of our component.

8. Rendering the image:

• We use the data URL as the src attribute of an <img> tag.
• The browser decodes the base64 data and renders the image.

• Blob storage overview in Val Town docs
• Val Town REST API references for blobs
• Val Town blob std lib source code