next/future/image - Style property values shouldn't contain a semicolon

[Jahrhause]

Hi

Im using the new experimental Image fro Next.js.
When i use the blurDataURL with a simple color baseURL i get the follwing warning/error:

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' xmlns%3Axlink='http%3A//www.w3.org/1999/xlink' viewBox='0 0 1200 600'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='50'%3E%3C/feGaussianBlur%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1'%3E%3C/feFuncA%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,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mOsuPSgHgAGnwKrOCVWuwAAAABJRU5ErkJggg=='%3E%3C/image%3E%3C/svg%3E")" instead.

The way I call it is:

<Image src={src} alt="" width={1200} height={600} placeholder="blur" blurDataURL={ 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mOsuPSgHgAGnwKrOCVWuwAAAABJRU5ErkJggg==' } priority />

What could I be doing wrong?

[Jahrhause]

Hi @valcosmos

Thanx for your answer. Are you using the new next/future/image also?

This is a screen of my code:

I only get the error the first time, when I start the server (npm run dev) all other subsequent calls to the image runs fine.

[icyJoseph]

Hi,

This warning is raised by React, and it is caused on this line

next.js/packages/next/client/future/image.tsx

Line 510 in 3411794

const svgBlurPlaceholder = `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 ${widthInt} ${heightInt}'%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='${blurDataURL}'/%3E%3C/svg%3E");`

const imgStyle = Object.assign({}, style)
const svgBlurPlaceholder = `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 ${widthInt} ${heightInt}'%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='${blurDataURL}'/%3E%3C/svg%3E");`

React doesn't really like when the styles end with ; like:

<p
  style={{
    color: "red;",
  }}
>
  hello
</p>

You can try it on a codesandbox.

I guess this has to be fixed by the next team in the next/future/image.

[Jahrhause]

Thanks I'll raise an issue on this :)

[styfle]

PR with the fix #38454