Image Block: images with data URI does not render properly on save

[annemirasol]

When using a Data URI for the Image block (using "Insert from URL"), the image renders okay while inside the editor, but doesn't render after saving.

The HTML generated while inside the editor (data URI truncated for convenience).

<figure class="wp-block-image size-large"><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...=" alt=""/></figure>

The HTML generated after saving (inside the post). I noticed that the data: part of the src value was dropped.

<figure class="wp-block-image size-large"><img src="image/jpeg;base64,/9j/4AAQSkZJRgABAQ...=" alt=""/></figure>

Steps to reproduce

1. Go to the block editor.
2. Insert an Image block (/image) and choose Insert from URL...
3. Paste the Data URI of an image. (For testing, I used Google Images search, double-clicked an image, and choosed Copy image address.)
4. Paste the data URI in the Image block's URL field. Notice that it renders properly inside the editor.
5. Save your post and view. Notice that the image is not rendered.

What I expected

I expected the image to render even after saving.

What happened instead

The image doesn't render.

Browser / OS version

• macOS Catalina Version 10.15.6
• Google Chrome Version 84.0.4147.105 (Official Build) (64-bit)

Screenshot / Video

https://d.pr/v/ftRpYm

Context / Source

I was demo-ing the block editor to a friend (who was then using Microsoft Edge browser) when this happened. I can replicate consistently using above-described Mac and Chrome setup. #user-report

[obenland]

Does this happen on self-hosted installs, too? I wonder if it's a Gutenberg bug where it's not accounting for jpeg data uris

[annemirasol]

Does this happen on self-hosted installs, too? I wonder if it's a Gutenberg bug where it's not accounting for jpeg data uris

I had initially filed this as a Gutenberg issue, but then I checked the behavior on self-hosted, and it was working fine there.

[github-actions]

This issue is stale because it has been 180 days with no activity. You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation and apply one of relevant issue close labels.