Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Weird blur/shadows on images

See original GitHub issue

I am getting some weird shadowy blurry things on my images and I am not sure why. Any ideas?

This is my usage:

      <Img
        alt="A desktop and mobile app mockup being worked on by a tentacle."
        attributes={{
          img: {
            class:"h-auto max-w-xl mt-8 mx-auto w-full lg:ml-0 lg:mt-0"
          }
        }}
        format="webp"
        loading="lazy"
        src="/img/hero-images/app-development.png"
      />

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:5 (2 by maintainers)

Top GitHub Comments

2reactions

m4rrc0commented, Jun 6, 2022

Hey, quick fix example for the <Img /> component.

<Img {...props} attributes={{ img: { onload: "this.style.background = 'transparent';" } }} />

Of course it only works if the client has JS so I added this at the bottom of my <body>

<noscript><style is:inline>.astro-imagetools-img{background:none;}</style></noscript>

1reaction

rwwagner90commented, Jun 6, 2022

@IanVS thanks for the tip, I am okay with no placeholders for my use case, I think. Will see how that goes. Definitely agree we should remove those background images. This is a pretty common case I think.

Top Results From Across the Web

Abstract Blur Shadows Window On White Stock Photo ...

Find Abstract Blur Shadows Window On White stock images in HD and millions of other royalty-free stock photos, illustrations and vectors in the...

Descubra e compartilhe as mais belas imagens de todo o mundo ...

Find images and videos about pink, pastel and pearls on We Heart It - the app ... Schaduwfoto Mad World, King Louie, Blur,...

Transparent leaves Black & White Stock Photos - Alamy

Find the perfect transparent leaves black & white image. Huge collection, amazing choice, ... Blur shadows of plants and tree leaves on a...

Image Details ING_37292_04504 - Retro bakery labels and ...

Image Details: Ingimage contributors ING_37292_04504, Stock photo of Retro bakery labels and typography. Blur, shadows background. Coffee shop, cafe ...

What is the cleanest image format to import into a ...

If Mathematica still cannot import the file, try to make it simpler. Avoid gradients, blur, shadows, etc. when preparing the file.