diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index f3e64f28c25405..41e17beacad528 100644
--- a/packages/next/client/image.tsx
+++ b/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'
         }
diff --git a/test/integration/image-component/default/pages/style-filter.js b/test/integration/image-component/default/pages/style-filter.js
new file mode 100644
index 00000000000000..cb2e6f36d91748
--- /dev/null
+++ b/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
diff --git a/test/integration/image-component/default/style.module.css b/test/integration/image-component/default/style.module.css
index 16cb4d6838932e..fbb42f4cf4f5bb 100644
--- a/test/integration/image-component/default/style.module.css
+++ b/test/integration/image-component/default/style.module.css
@@ -9,3 +9,7 @@
 .mainContainer img {
   border-radius: 139px;
 }
+
+.opacity50 {
+  filter: opacity(0.5);
+}
diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js
index 2052b81adc2078..cfd0decc61e0a2 100644
--- a/test/integration/image-component/default/test/index.test.js
+++ b/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 () => {