Return image from Nuxt 3 REST API route

Question

I have a simple API that fetches an image, transforms it and is intended to return the new image. I can currently return a base64 string representation of the image, but how can I return this as an actual image that will simply render in the browser?

As an example, if I enter this link into the browser it correctly renders the image. I would like to be able to prefix this with my own URL (e.g. for testing https://localhost:3000/api/images/remote/[URL] and have it return the image in the same way.

Currently I can return the base64 string of the new image using the code below:

const response = await fetch(URL)

// do transformations

const arrayBuffer = await response.arrayBuffer()
const buffer = Buffer.from(arrayBuffer)
const base64 = buffer.toString("base64")

return base64

This results in a string that I can successfully render in an <img> tag as base64. How can I return this as an image object that will simply render in the browser, i.e. not as a base64 string?

I realise this may be as simple as correctly setting headers on the response and returning a blob, but I am drawing a blank when Googling (extensively).

Pretty much a matter of saving the file with the base64 I guess: stackoverflow.com/q/35940290/8816585 — kissu
– kissu, Commented Oct 3, 2022 at 8:41

Mr. Vermeer · Accepted Answer · 2023-03-21 13:19:09Z

3

I assume you're referring to the /server directory in your nuxt project for your API? Because I needed a server-route for retrieving thumbnails that require an access token:

// file: ../server/api/thumbnail/[filename].get.js
export default defineEventHandler( async (e) => {
    const { filename } = e.context.params;

    try {
        const token = await getToken();

        const blob = await $fetch(`${BASE_URL}/resources/thumbnails/${filename}`, {
            headers: {
                "Token": token
            }
        });

        const arrayBuffer = await blob.arrayBuffer()
        const buffer = Buffer.from(arrayBuffer, 'base64')

        return buffer;
    }
    catch (err) {
        console.error(err);
    }

    return {};
});

answered Mar 21, 2023 at 13:19

Mr. Vermeer

836 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Return image from Nuxt 3 REST API route

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related