Next.js Discord

Discord Forum

Tag Image change my background image to black in production build

Unanswered
Peterbald posted this in #help-forum
Open in Discord
Avatar
PeterbaldOP
Hello, i've problem with tag Image in production build

i've an Image with Transparant Background, in my localhost i use tag Image from next/image

<Image
  width={500}
  height={500}
  objectFit="cover"
  src="/images/bootcamp-lita.webp"
  alt="image-tyas"
  className="img-banner-tyas"
/>

.img-banner-tyas {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 3/2;
  /* transition: transform 0.3s ease-in-out; */
  transform: scale(
  1.1
  );
}



Production 

<img alt="image-tyas" loading="lazy" width="500" height="500" decoding="async" data-nimg="1" class="img-banner-tyas" style="color:transparent" srcset="/_next/image?url=%2Fimages%2Fbootcamp-lita.webp&amp;w=640&amp;q=75 1x, /_next/image?url=%2Fimages%2Fbootcamp-lita.webp&amp;w=1080&amp;q=75 2x" src="/_next/image?url=%2Fimages%2Fbootcamp-lita.webp&amp;w=1080&amp;q=75">


Localhost

<img alt="image-tyas" loading="lazy" width="500" height="500" decoding="async" data-nimg="1" class="img-banner-tyas" style="color:transparent" srcset="/_next/image?url=%2Fimages%2Fbootcamp-lita.webp&amp;w=640&amp;q=75 1x, /_next/image?url=%2Fimages%2Fbootcamp-lita.webp&amp;w=1080&amp;q=75 2x" src="/_next/image?url=%2Fimages%2Fbootcamp-lita.webp&amp;w=1080&amp;q=75">
Image
Image

2 Replies

Avatar
PeterbaldOP
Link: https://dev.enigmacamp.com/_next/image?url=%2Fimages%2Fbootcamp-lita.webp&w=640&q=75


i dont know the tag change my background image :/

i set backgroundColor manully in local, its work, but in production not work
https://dev.enigmacamp.com/