next/future/image blurDataUrl throwing error about 'style property should not contain semicolon'

[ndom91]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Thu, 09 Jun 2022 16:14:10 +0000
Binaries:
  Node: 16.15.0
  npm: 8.5.5
  Yarn: 1.22.19
  pnpm: 7.3.0
Relevant packages:
  next: 12.2.1-canary.4
  eslint-config-next: 12.1.6
  react: 18.1.0
  react-dom: 18.1.0

What browser are you using? (if relevant)

Brave 1.39.122 Chromium: 102.0.5005.115 (Official Build) (64-bit)

How are you deploying your application? (if relevant)

No response

Describe the Bug

When using the new (experimental?) next/future/image with next@12.2.1-canary.4, I'm getting errors in the console that the style property shouldn't contain semicolons, with a recommendation to "try this instead". See:

Warning: Style property values shouldn't contain a semicolon. Try "backgroundImage: 
url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 
250 125'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur 
stdDeviation='50'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 
1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cimage filter='url(%23b)' x='0' y='0' 
height='100%25' width='100%25' 
href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAAAsTAAALEwE
AmpwYAAAAI0lEQVQImWMIkQ1b7lH+sWnm/9V9DC4MnAvVbD52R/x/XQUAkkgL+qsVWWQAAAAASUVORK5CYII='/%3E%3C/s
vg%3E")" instead.

I've played around with it a bit, and its clearly only appearing when I enable and pass a blurDataURL. These data URL's are typical base64 data URI's though, which by definition should contain a semicolon, right?

i.e. data:image/jpeg;base64,/9j/2wBDAYK.....

Component in question: https://github.com/ndom91/briefkasten/blob/main/src/components/bookmark-card.jsx#L169-L182

I can't tell for sure, but with the network speed slowed down to Slow 3G, it seems that the blur placeholder is not working anymore when this error is thrown. It was previously working with 12.1.X and next/image with the same code, however.

Expected Behavior

Render the blur placeholder while image is loading.

Link to reproduction

https://briefkasten.vercel.app

To Reproduce

Login to my sideproject bookmark app linked above, add a bookmark, and reload the page.

[KenAKAFrosty]

Looks like @styfle is already on it!
Here are the commits on the branch where you can see the slight change that was needed:
canary...remove-semicolon-next-future-image

Seems like this should be fixed pretty soon here. Nice catch!

[styfle]

Thanks! This will be fixed in #38454

[ndom91]

Awesome thanks a lot for the quick turn around!

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.