Image component does not work with Storybook

[kodai3]

Bug report

Describe the bug

using next/image component in storybook throw Error.

To Reproduce

1. Set up with-storybook example yarn create next-app --example with-storybook with-storybook-app
2. Create new story using next/image

import Image from 'next/image'
import React from 'react'

export default { title: 'Image' }
// image url
const url = 'https://......'

export const withNextImage = () => (
  <Image src={url} width={100} height={100} />
)

3. Start storybook

Expected behavior

show Image without Error as plane image tag do.

Screenshots

System information

• OS: macOS
• Browser Chrome
• Version of Next.js: 10.0.0
• Version of Node.js: v12.16.3

[styfle]

The import is fixed when adding @next/plugin-storybook like in PR #18367.

However, this only solves the problem for 3rd party loaders like imgix, cloudinary, etc.

For the default loader, we still need a way to expose the API at /_next/image such that it can be used from a different port.

For example, storybook is running on 6006 and next dev is running on 3000, so we need to change the src to something like http://localhost:3000/_next/image or else the images aren't loaded by the browser when visiting http://localhost:6006.

[aippili-asp]

Is there any workaround for this?