Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
1 task done
ndom91 opened this issue Jul 7, 2022 · 4 comments · Fixed by #38454
Closed
1 task done
Assignees
Labels
Image (next/image) Related to Next.js Image Optimization.

Comments

@ndom91
Copy link
Contributor

ndom91 commented Jul 7, 2022

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:

image

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.

@ndom91 ndom91 added the bug Issue was opened via the bug report template. label Jul 7, 2022
@KenAKAFrosty
Copy link
Contributor

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 styfle added kind: bug Image (next/image) Related to Next.js Image Optimization. and removed bug Issue was opened via the bug report template. labels Jul 8, 2022
@styfle styfle self-assigned this Jul 8, 2022
@styfle
Copy link
Member

styfle commented Jul 8, 2022

Thanks! This will be fixed in #38454

@kodiakhq kodiakhq bot closed this as completed in #38454 Jul 8, 2022
kodiakhq bot pushed a commit that referenced this issue Jul 8, 2022
## Bug

- [x] Fixes #38404
- [x] Fixes #38431 
- [x] Integration tests updated
@ndom91
Copy link
Contributor Author

ndom91 commented Jul 8, 2022

Awesome thanks a lot for the quick turn around!

@github-actions
Copy link
Contributor

github-actions bot commented Aug 8, 2022

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Aug 8, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Image (next/image) Related to Next.js Image Optimization.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants