Fix style.filter on image with placeholder=blur (vercel#32623)

Fixes vercel#18398 (comment)

Author: styfle

packages/next/client/image.tsx

@@ -265,7 +265,7 @@ function handleLoading(
       const p = 'decode' in img ? img.decode() : Promise.resolve()
       p.catch(() => {}).then(() => {
         if (placeholder === 'blur') {
-          img.style.filter = 'none'
+          img.style.filter = ''
           img.style.backgroundSize = 'none'
           img.style.backgroundImage = 'none'
         }

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

@@ -0,0 +1,31 @@
+import React from 'react'
+import Image from 'next/image'
+import style from '../style.module.css'
+import img from '../public/test.jpg'
+
+const Page = () => {
+  return (
+    <div>
+      <h1>Image Style Filter</h1>
+
+      <Image
+        className={style.opacity50}
+        id="img-plain"
+        src="/test.jpg"
+        width={400}
+        height={400}
+      />
+
+      <Image
+        className={style.opacity50}
+        id="img-blur"
+        placeholder="blur"
+        src={img}
+      />
+
+      <footer>Footer</footer>
+    </div>
+  )
+}
+
+export default Page

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

@@ -9,3 +9,7 @@
 .mainContainer img {
   border-radius: 139px;
 }
+
+.opacity50 {
+  filter: opacity(0.5);
+}

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

@@ -828,6 +828,19 @@ function runTests(mode) {
     }
   })
 
+  it('should apply filter style after image loads', async () => {
+    const browser = await webdriver(appPort, '/style-filter')
+    await check(() => getSrc(browser, 'img-plain'), /^\/_next\/image/)
+    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)')
+
+    const blur = await getComputedStyle(browser, 'img-blur', 'filter')
+    expect(blur).toBe('opacity(0.5)')
+  })
+
   // Tests that use the `unsized` attribute:
   if (mode !== 'dev') {
     it('should correctly rotate image', async () => {