Fix style reset on image with placeholder=blur (vercel#32680)

This PR is a follow up to PR vercel#32623 to fix the remaining blur styles.

These are unlikely to be overridden by the user but this PR is necessary to make `placeholder=empty` (default behavior) and `placeholder=blur` end up with the same inline styles on the loaded image.

Related to vercel#18398 (comment)

Author: styfle

packages/next/client/image.tsx

@@ -266,8 +266,9 @@ function handleLoading(
       p.catch(() => {}).then(() => {
         if (placeholder === 'blur') {
           img.style.filter = ''
-          img.style.backgroundSize = 'none'
-          img.style.backgroundImage = 'none'
+          img.style.backgroundSize = ''
+          img.style.backgroundImage = ''
+          img.style.backgroundPosition = ''
         }
         loadedImageURLs.add(src)
         if (onLoadingComplete) {

test/integration/image-component/default/pages/style-filter.js

@@ -9,15 +9,15 @@ const Page = () => {
       <h1>Image Style Filter</h1>
 
       <Image
-        className={style.opacity50}
+        className={style.overrideImg}
         id="img-plain"
         src="/test.jpg"
         width={400}
         height={400}
       />
 
       <Image
-        className={style.opacity50}
+        className={style.overrideImg}
         id="img-blur"
         placeholder="blur"
         src={img}

test/integration/image-component/default/style.module.css

@@ -10,6 +10,9 @@
   border-radius: 139px;
 }
 
-.opacity50 {
+.overrideImg {
   filter: opacity(0.5);
+  background-size: 30%;
+  background-image: url('data:image/png;base64,iVBORw0KGgo=');
+  background-position: 1px 2px;
 }

test/integration/image-component/default/test/index.test.js

@@ -834,11 +834,31 @@ function runTests(mode) {
     await check(() => getSrc(browser, 'img-blur'), /^\/_next\/image/)
     await waitFor(1000)
 
-    const plain = await getComputedStyle(browser, 'img-plain', 'filter')
-    expect(plain).toBe('opacity(0.5)')
+    expect(await getComputedStyle(browser, 'img-plain', 'filter')).toBe(
+      'opacity(0.5)'
+    )
+    expect(
+      await getComputedStyle(browser, 'img-plain', 'background-size')
+    ).toBe('30%')
+    expect(
+      await getComputedStyle(browser, 'img-plain', 'background-image')
+    ).toMatch('iVBORw0KGgo=')
+    expect(
+      await getComputedStyle(browser, 'img-plain', 'background-position')
+    ).toBe('1px 2px')
 
-    const blur = await getComputedStyle(browser, 'img-blur', 'filter')
-    expect(blur).toBe('opacity(0.5)')
+    expect(await getComputedStyle(browser, 'img-blur', 'filter')).toBe(
+      'opacity(0.5)'
+    )
+    expect(await getComputedStyle(browser, 'img-blur', 'background-size')).toBe(
+      '30%'
+    )
+    expect(
+      await getComputedStyle(browser, 'img-blur', 'background-image')
+    ).toMatch('iVBORw0KGgo=')
+    expect(
+      await getComputedStyle(browser, 'img-blur', 'background-position')
+    ).toBe('1px 2px')
   })
 
   // Tests that use the `unsized` attribute: