Images are shown black & white only

[Soljanka]

Hi there,

I do have the strange issue that images are only shown black & white as seen in the image below. I did try different browsers and different machines without any luck. Using any of the public instances does show the images in color as it is supposed to be. I don't get any errors starting the container. This is all I get looking at the console.

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn  - You have enabled experimental features (images, isrMemoryCacheSize) in next.config.mjs.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

info  - SWC minify release candidate enabled. https://nextjs.link/swcmin

this is my docker compose file

services:
    libremdb:
        container_name: libremdb
        ports:
            - 3000:3000
        env_file:
            - libremdb.env
        image: ghcr.io/zyachel/libremdb:main

this is my env-file:

NEXT_TELEMETRY_DISABLED='1'
NEXT_PUBLIC_URL=http://chaneira:3000
AXIOS_USERAGENT='Mozilla/5.0 (X11; Linux x86_64; rv:108.0) Gecko/20100101 Firefox/108.0'
AXIOS_ACCEPT='text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8'
AXIOS_LANGUAGE='de-DE,de;q=0.5'

[zyachel]

for images, sharp is used for compression on the server. but judging from the network requests and the image preview, only the browser is doing some filtering. I don't have any filter on this image except for blur (which too is behind the main image).

since you've tried using other machines (hopefully with extensions like dark reader disabled), I'm unsure of the reason, mate.

if you believe blurring is the suspect, try building the image locally after doing these changes:

remove this backgroundImage:

libremdb/src/components/card/CardBasic.tsx

Line 17 in a0f24a4

backgroundImage: image && `url(${getProxiedIMDbImgUrl(modifyIMDbImg(image, 300))})`,

remove @include blocks:

libremdb/src/styles/modules/components/card/card-basic.module.scss

Lines 31 to 68 in a0f24a4

	@include helper.bp('bp-900') {
	padding: var(--spacer-2);
	isolation: isolate;
	// for adding layer of color on top of background image
	&::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
	to top,
	var(--clr-bg-accent) 10%,
	transparent
	);
	backdrop-filter: blur(8px);
	}
	}
	}
	.image {
	object-fit: cover;
	object-position: center;
	@include helper.bp('bp-900') {
	z-index: 1;
	object-fit: contain;
	outline: 3px solid var(--clr-fill);
	outline-offset: 5px;
	max-height: 100%;
	margin: auto;
	// overrriding nex/future/image defaults
	height: initial !important;
	width: initial !important;
	position: relative !important;
	}