Image not shown with nextjs

[Laecherlich]

Hey, I. was following the Nextjs guide and in Development everything worked fine but in Production the images are not opened correctly.

Some context: The images are stored on the sever using pocketbase, the url to these images looks like this:

http://127.0.0.1:8090/api/files/i0efwtbdbv3j0bu/w7r7of518h1youk/photo_wExqZKDKpk.jpg?thumb=100x250

For the preview images nextjs create a url which looks like this:

https://{domain}/_next/image?url=http%3A%2F%2F127.0.0.1%3A8090%2Fapi%2Ffiles%2Fi0efwtbdbv3j0bu%2F2ydy5l039waw3am%2Fphoto_jP0ZGJ8EG9.jpg%3Fthumb%3D100x250&w=256&q=80

This works like a charm and the previews are displayed correctly, but when opening the image only the first url is used which is not accessible. For me it looks like this has something to do with how nextjs handles images but maybe it is also a bug from my side.

Can someone help me here?

[silvia-odwyer]

@Laecherlich Hi Luke, I've taken a look into this issue, and in production mode, you would need to initialize Pocketbase with the production server URL instead of the localhost address:

new PocketBase("https://production-url-example.com")

The images should be accessible from the newly constructed image URLs then.

If this doesn't work, could you provide the JSX that you're using to display the preview images and lightbox? Thanks!

[Laecherlich]

@silvia-odwyer thanks for the quick response. Pocketbase should only be accessible on the server side via localhost. I think the problem is elsewhere because it works for the preview images.

'use client';

import { Photo } from '@/config/types';
import { SlideshowLightbox } from 'lightbox.js-react';
import 'lightbox.js-react/dist/index.css';
import Image from 'next/image';

const ImagePreview = ({ photos }: { photos: Photo[] }) => {
  return (
    <div>
      <SlideshowLightbox
        lightboxIdentifier="lightbox1"
        framework="next"
        images={photos.map(photo => ({
          src: photo.url,
          alt: photo.name,
        }))}
      >
        <div className="flex flex-row gap-5 flex-wrap">
          {photos.map(photo => (
            <Image
              key={photo.name}
              src={photo.url}
              alt={photo.name}
              height={100}
              width={100}
              data-lightboxjs="lightbox1"
              quality={80}
            />
          ))}
        </div>
      </SlideshowLightbox>
    </div>
  );
};

export default ImagePreview;

The images that use the nextjs Image component are displayed correctly with a url that looks like this

https://lager.it-luke.de:400/_next/image?url=http%3A%2F%2F127.0.0.1%3A8090%2Fapi%2Ffiles%2Fi0efwtbdbv3j0bu%2F2ydy5l039waw3am%2Fphoto_jP0ZGJ8EG9.jpg%3Fthumb%3D100x250%26token%3DeyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjb2xsZWN0aW9uSWQiOiJfcGJfdXNlcnNfYXV0aF8iLCJleHAiOjE3MDA1NjQ2MDcsImlkIjoiZjZndzFhbndwd3plcHhrIiwidHlwZSI6ImF1dGhSZWNvcmQifQ.VWW19j-gm1N75tEd7nC5-LgYv9HYVmAftI3vX3nASXA&w=256&q=80

But the when opening the Lightbox the images are not displayed. The url I pass to the nextjs Image look like this:

http://127.0.0.1:8090/api/files/i0efwtbdbv3j0bu/ov91wdqh1b50t11/photo_m6zX6LOxrB.jpg?thumb=100x250&token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpX

I am not sure what happens internally when using the nextjs Image. Do I need to construct the url manually and pass it to the Lightbox or is it possible to use the nextjs Image component also for the Lightbox.

[silvia-odwyer]

@Laecherlich Hi Luke, I've added a new feature where custom components can be rendered within the lightbox, such as the Next.js Image component.

Firstly, create an array of image items, and for custom embeds, set the type to customEmbed. Then set the embed property to the custom component you want to render in the lightbox.

const imageItems = [
  {
    type: "customEmbed",
    thumbnailSrc: "https://source.unsplash.com/OZACaaUskhg/900x450",
    alt: "Mountain range with a sky in the foreground",
    embed: <Image
    src={"https://source.unsplash.com/OZACaaUskhg/1800x900"}
    alt={"Mountain range with a sky in the foreground"}
    height={500}
    width={500}
    quality={80}
    />
  },
...
]

Then, just pass the image array to the lightbox:

<SlideshowLightbox lightboxIdentifier="lightbox1" images={imageItems} showThumbnails={true}>
        {imageItems.map((image, index) => (
            <img
                src={image.thumbnailSrc}
                alt={image.alt}
                key={"img_" + index}
                data-lightboxjs="lightbox1"
            />
        ))}
</SlideshowLightbox>

This will render the Next.js Image components within the lightbox instead of the img element. Hopefully that helps, and let me know if you have any queries.

[Laecherlich]

@silvia-odwyer Hey, this sounds like a nice approach unfortunately I got this error:

This is my current code:

const ImagePreview = ({ photos }: { photos: Photo[] }) => {
  const [isOpen, setIsOpen] = useState(false);

  const imageItems = useMemo(() => {
    return photos.map(photo => ({
      type: "customEmbed",
      alt: photo.name,
      embed: (
        <Image
          src={photo.url}
          key={photo.name}
          alt={photo.name}
          height={100}
          width={100}
          quality={80}
        />
      ),
    }));
  }, [photos]);

  return (
    <div>
      <SlideshowLightbox
        lightboxIdentifier="lightbox1"
        framework="next"
        open={isOpen}
        images={imageItems}
      >
        <Button onClick={() => setIsOpen(true)}>Bilder ansehen</Button>
      </SlideshowLightbox>
    </div>
  );
};

export default ImagePreview;

[silvia-odwyer]

@Laecherlich I've taken a look at your code. If you aren't using the data-lightboxjs attribute on images, then the lightboxIdentifier prop is not required. If you remove this, the lightbox will render.

Also, if you'd like to set the image source for the individual thumbnails in the lightbox, you can specify this with the thumbnailSrc property for each image item.

Hopefully that helps, and let me know if you have any queries.

[Laecherlich]

@silvia-odwyer This works perfect, thank you.

[silvia-odwyer]

@Laecherlich I've updated the library to fix a bug regarding navigation through multiple custom embeds in the lightbox. If you're rendering multiple images, I would recommend updating to the latest version of the library to ensure that the bug is fixed.

If you have any other queries, just let me know, I'll be glad to help.