Skip to content

Images cannot be parsed when obtained through event handlers #1329

@GalacticHypernova

Description

@GalacticHypernova

Currently NuxtImg only seems to work fine with images that are presented at build time in ~/public. While that may suffice most static sites, for sites that require user interaction, including uploading media, this ends up breaking the images in production. It is not ideal to have to rebuild the app every time an image is uploaded, for quite obvious reasons.
Take for example this code:

// ~/server/routes/images/[image].get.ts
export default defineEventHandler({
    handler: async (event) => {
        const img = getRouterParam(event, "image")
        const imageStorage = useStorage("images") // this could, for example, be an FS driver configured in `nuxt.config.ts`
        if (await imageStorage.hasItem(img)) {
            return await imageStorage.getItem(img)
        }
    }
})

This works fine when going to it on the browser, but NuxtImg fails to parse this, with a message stating the file cannot be found.

It would be very beneficial to have the benefits of image optimization for images that are obtained dynamically through event handlers, as most SSR apps use this kind of functionality.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions