Image doesn't support the loader prop

[tremby]

Describe the bug

I'm not sure if this is related to #67

I am building a site which loads images from various different sources. Next's next/image component allows a loader prop which allows me to pass in a function which generates URLs for a given image at various different widths.

I have different loader functions which produce different aspect ratios, and that sort of thing.

It seems that when run via storybook-addon-next, the loader prop is ignored or overruled, and I get the plain src coming through, which is not an actual loadable URL. This would also be the case if using some built-in loaders -- cloudinary for sure and possibly others.

Your minimal, reproducible example

Sorry, none

Steps to reproduce

import { Story, ComponentMeta } from "@storybook/react";

import Image from "next/image";

export default {
  title: "ImageTest",
  component: ImageTest,
} as ComponentMeta<typeof ImageTest>;

export const ImageTest: Story = () => (
  <Image
    src="my-untranslated-src"
    alt=""
    layout="responsive"
    loader={({ src, width, quality }) => `https://placekitten.com/${width}/${width}`}
    width={400}
    height={300}
  />
);

This loader is obviously pretend.

Expected behavior

This ought to come out with a kitten image, but it'll result in a broken image because storybook will render an image with "my-untranslated-src" as the source, and there is no such image.

How often does this bug happen?

No response

Screenshots or Videos

No response

Platform

n/a

storybook-addon-next version

v1.6.6

Additional context

No response

[RyanClementsHax]

Thanks for opening this issue.

It is related to #67 as this repo only supports unoptimized images as detailed here. Hopefully I can support loaders and optimized images in the future, but that is a feature in the works since it requires implementing a lot of complexity like parsing the next.js config with defaults.

[RyanClementsHax]

Closing this issue as it is a duplicate