Image component fails when using image data URI

Bug report

Describe the bug

When passing an image data URI to the Next.js image component an error is thrown.

To Reproduce

Pass data URI to the Next.js image component:

Example:

import Image from 'next/image';
<Image src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=">

Expected behavior

The simplest solution and expectation would be to pass the URI directly to the img tag without any modification or optimization.

Screenshots

Not applicable but error reported on the debug overlay is:

Error: Invalid src prop (data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=) on `next/image`, hostname is not configured under images in your `next.config.js`

System information

• OS: Windows
• Browser (if applies) Chrome, Firefox, Edge
• Version of Next.js: 10.0.0
• Version of Node.js: 12.9.0

Additional context

None.

[AlexSapoznikov]

1. Also can not load static image: https://github.com/vercel/next.js/discussions/18311
2. Image with empty src should probably not throw an error as well… <Image src="" ...

[brnyza]

Unfortunately enabling unoptimized doesn’t do the trick atm (using next@11.0.1-canary.4).

For me it worked writing like this on Next.js v11.0.1: <Image unoptimized src={data:image/jpeg;base64,${imageBase64}} alt="Landscape picture" width={300} height={300} />