feature: @nuxt/image

[oritwoen]

I noticed that the @nuxt/image package does not work with this demo and maybe the @nuxt/nitro package itself.

Folder .vercel_build_output/config/images.json is not generated.

When built without nitro, everything works beautifully with the package @nuxt/image.

Is there any setup that would make the images work with nitro?

[oritwoen]

@danielroe The last time I used Vercel and Nitro I was dealing with this issue by a workaround.

I created an image.js script that generated and save a .vercel_build_output/config/images.json in the currently using folder and then modified package.json replacing the

"build": "nuxt generate"

with

"build": "nuxt generate && node ./image.js"

And then it worked. Apparently there is a problem with the paths when building.

My image.js

const { parseURL } = require('ufo')
const { resolve, dirname } = require('upath')
const { writeJson, mkdirp } = require('fs-extra')

async function images() {
    const moduleOptions = {
        domains: ['https://api.mysite.pl', 'https://images.pexels.com'],
        screens: {
            icon: 40,
            banner: 300,
            card: 286,
            offe: 278,
            part: 64,
            media: 394,
            newMedia: 400,
            avatar: 24,
            exchange: 1024,
            francise: 1220,
            pexels: 2000
        }
    }

    const imagesConfig = '.vercel_build_output/config/images.json'

    await mkdirp(dirname(imagesConfig))
    await writeJson(imagesConfig, {
        domains: moduleOptions.domains.map((domain) => parseURL(domain).host),
        sizes: Array.from(new Set(Object.values(moduleOptions.screens || {})))
    })
}

images()