NuxtImg Component Not Rendering in Storybook

[Kingo4luv]

I am attempting to integrate Storybook with my Nuxt 3 application. While most components render perfectly, I'm facing issues specifically with the NuxtImg component. It works as expected within the Nuxt app, but throws an error when visualized in Storybook.

Error Message:

[Vue warn]: Component is missing template or render function. 
at <NuxtImg class="w-full h-full object-cover object-center null" alt="Another Night Somewhere in the Universe" provider="imgix" ... >

Component Code:

<template>
    <nuxt-img
        class="w-full h-full object-cover object-center"
        :class="`${rounded[radius]} ${imgClass}`"
        :alt="alternateText"
        provider="imgix"
        :src="file.filename"
        :sizes="size"
        loading="lazy"
        :preload="preload"
        :preset="preset"
        @load="$emit('image-loaded')"
    />
</template>

Expected Behavior: The NuxtImg component should render without issues in Storybook just as it does within the Nuxt application.

Actual Behavior: The component throws an error and doesn't display as expected.

Steps to Reproduce:

Set up a Nuxt 3 project. Integrate Storybook. Create a component utilizing NuxtImg. Attempt to visualize the component in Storybook. Environment:

Nuxt version: v3.7.3 Nuxt Image verson: v1.0.0-rc.2 Nuxt Storybook version: v7.0.0 Node version: v18.16.0 Browser: Chrome, Firefox, Safari OS: MacOS, Windows

Additional Notes: I've followed the recommended configurations for both Nuxt and Storybook. Other components without NuxtImg seem to render fine in Storybook. Any assistance on this would be greatly appreciated!

[perezguedesmaikel]

that happens to me too

[yuuzora]

Having the same issue

[Archetipo95]

Take a look here, I mocked the component to show a simple html image

https://github.com/Archetipo95/my-nuxt-starter/blob/main/.storybook/mocks/NuxtImage.ts