Problem with Thumbnails

[Phoi-Hoa-Nguyen]

Hey!

I could´nt figure out why the thumbnails won´t display the images, which are 512×512.
Images who are 1,024×1,024 can be display via thumbails in the lightbox. Did I configure it wrong or what kind of issue do I have?

The width and height are declare as " width: 256, height: 256" in the "photoAllList"

const breakpoints = [3840, 2400, 1080, 640, 384, 256, 128, 96, 64, 48];

const Photos = photoAllList.map((photo) => {
    const width = breakpoints[0];
    const height = (photo.height / photo.width) * width;
    const description = photo.description;
    return {
        src: photo.src,
        width,
        height,
        images: breakpoints.map((breakpoint) => {
            const height = Math.round((photo.height / photo.width) * breakpoint);
            return {
                src: photo.src,
                width: breakpoint,
                height,
            };
        }),
    };
});

Thanks in advance! :)

[igordanchenko]

It's tough to tell without seeing the actual code. Please post a demo on CodeSandbox and I'll take a look.

By the way, the code snippet that you posted above makes very little sense. It looks like you are trying to create photos array with responsive images, but you are using the same src in all images (src: photo.src). You should probably use photoAllList as-is if that's the case.

[Phoi-Hoa-Nguyen]

Thanks for the fast reply and sorry about the confusion definition of my resource images (src: photo.src) because I used it for e.g. "src: require("../pictures/.../.../.../1.png")".
Btw. I have found out the issue regarding my problem. The problem lies in the path naming of the resource of the images. It look likes that the thumbnail-feature could not resolve the length or special characters of the path e.g.
src: require("../pictures/bowl/lightning/leonardo/Photograph of a bowl of soup that is also a portal to another dimension by Leonardo da vinci, studio lightning, ambient.png")

I guess the only solution would be a short concise naming for all of the resource file (which of course works)?

[igordanchenko]

This doesn't sound like a library issue. Maybe you need to URL-encode the file path returned by require (the string you pass as src must be a valid URL), but I'm unable to troubleshoot your specific issue without seeing a repro.

[Phoi-Hoa-Nguyen]

Hey!
Indeed it was a encoding-issue. I could solve it with "encodeURIComponent()" to avoid special characters.
Thanks very much and sorry for the inconvenient without a proper code snippet via CodeSandbox.
I will create it next time (if I got a next Issue :D)
Best regards