Next.js: Image component fails when using image data URI

[jecassis]

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="" ...

[fzembow]

Assuming that this is a bug that will be fixed, a temporary workaround would be to disable the base64-inlining behavior of next/image, by setting inlineImageLimit to 0 in your next.config.js

That way you don't have to replace all the Image with img throughout a codebase just to workaround this -- just remove the limit later.

[styfle]

The workaround today is to add the unoptimized property to indicate that this image should not be optimized.

We can probably detect when src is using the data: protocol to make this opt-out without additional attributes.