yifaneye / react-gallery-carousel Goto Github PK

Is your feature request related to a problem? Please describe.
I'm using the carousel in a context where there are likely to be hundreds of thumbnails. In this case the user will likely want to use the thumbnails to navigate to the right slide, but the user is likely to only have access to a vertical scroll wheel on a mouse, making looking through all the thumbnails difficult.

Describe the solution you'd like
It would be nice if there could be a prop enabling a scrollbar to show up allowing the user to scroll through the thumbnails.

Describe alternatives you've considered
I tried overriding the css in the component to add a scrollbar to the thumbnails container, but because I wasn't accessing the container directly, the effect ended up being that I stole vertical space from the thumbnails, making them so small that they were unusable for navigation, defeating the purpose. If this feature were native, then an option to enable the scrollbar could perhaps instead borrow the needed space from the image panel, where those pixels are less likely to make such a dramatic difference. I also looked into whether there is a way to convert vertical scroll wheel inputs into horizontal scrolling, but the hacks I found didn't seem to work without direct access to the component.

Additional context
Thank you :)

The gallery is not working under IPhone/Safari, it shows following error message:

mediaQueryList.addEventListener is not a function. (In 'mediaQueryList.addEventListener('change', callback)', 'mediaQueryList.addEventListener' is undefined)

Apparently the window.matchMedia(query) does not have addEventListener/removeEventListener on some browsers.

This is called in one useSellect in react-gallery-carousel:

If you don't have IOS, I can recommend you to try https://www.browserstack.com/, you can test there a little bit for free, or you can use some other IOS emulator

Describe the bug
Random bug when component loads, only happens sometimes. Happens randomly!

Screenshots

Desktop (please complete the following information):

• OS: [Windows]
• Browser [Edge]

Additional context
Add any other context about the problem here.

Hi there, this probably isnt a problem with the repo, more me not understanding how to do this properly.

Here is where I pull in the product from firebase:

useEffect(() => {
        if (listingID === '') {
            window.alert("no id")
        } else {
            var docRef = db.collection("listings").doc(listingID);
            docRef.get().then((doc) => {
                if (doc.exists) {
                    setListing(doc.data());
                } else {
                    console.log("No such document!");
                }
            }).catch((error) => {
                console.log("Error getting document:", error);
            });
        }
    }, [])

And then I assign the photos from the product data to "images" and follow the object pattern that the carousel requires:

const [images, setImages] = useState([]);
useEffect(() => {
        if (listing.listingPhotos != null) {
            console.log("SETTING IMAGES");
            listing.listingPhotos.forEach(element => {
                var imageURL = {
                    src: element
                }
                setImages(images => [...images, imageURL]);
            });
        }
    }, [listing])

And then in my jsx:

return (
        <div className="listingPage">
            <div className="listingPage__main">
                <div className="listingPage__left"></div>
                <div className="listingPage__center">
                    <div className="listingPage__center__itemContainer">
                        <div class="listingPage__center__itemContainer__gridSection image">
                            <Carousel images={images} />
                        </div>
...

When the page loads, I can see that the images are in the carousel object, however it doesnt render them, so I'm guessing its rendering the carousel before it has the images ready? Im new to react so can anyone give me some guidance how to make it wait until the images are ready? Thanks!

Hello yifaneye!

First, thank you for this very useful carousel! However, I am experiencing a little problem with the image display.

The issue
The first image seems to appear correctly. But as soon as I slide to the next ones, everything seems to shift slowly to the right. As a result, I have two photos appearing on one slide.

Expected behavior
How do I make one photo appear properly per slide?

Specifications

• My photos are all different sizes.
• They are fetched from a database that I created.
• I wrapped the carousel in a wrapper to position it in the center of my page.
• Browser: Chrome
• I'm new to coding! I've read the documentation and tried to find information on StackOverflow and ChatGPT but haven't found anything 😅

Screenshots
I made a loom record of the carrousel

<>
      <div className="pageContainer">
        <div className="titleWrapper">
          <h1>
            {villa.Villa.name} — {villa.Villa.region}
          </h1>
          <div>
            <Link to={-1}>Back</Link>
          </div>
        </div>

        <div className="flexRow">
          <Carousel
            images={images}
            style={{ height: 500, width: 600 }}
            hasMediaButton={false}
            shouldLazyLoad={true}
            objectFit="contain"
          ></Carousel>
        </div>
      </div>
    </>
  );
}

.titleWrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 4vh;
  margin-left: 4.5vw;
  margin-right: 4.5vw;
  align-items: flex-end;
}

.titleWrapper > h1 {
  margin: 0;
  padding: 0;
}

I hope this helps. I'm looking forward to your response. Thank you in advance!

I'm not able to see the slide transitions as shown in the demo videos, even on the demo site. I didn't dig into your code and/or css yet, but thought I'd report what I'm seeing in case you know off-hand what might be causing it.

I've created a sandbox here to show how I've attempted to adjust the props to enable transition effects:
https://codesandbox.io/s/recursing-agnesi-7s6n1z?file=/src/App.js

Tested on Chrome, FF, Edge

Kind Regards,
Jonathan

When you add prop shouldSwipeOnMouse you cannot maximize slide

To Reproduce
Steps to reproduce the behavior:

1. Add shouldSwipeOnMouse to gallery
2. Click on image
3. See error

Expected behavior
Maximize image

Additional context
I already fixed it by adding


but I don't know how to test it

Describe the bug
Left and right keys on the keyboard do not work when a widget is focused

To Reproduce
Steps to reproduce the behavior:

1. Go to a carousel with more than 1 slide
2. Focus a widget using the Tab key
3. Press the left key
4. See error

Expected behavior
Left and right keys should work when a widget is focused

Screenshots

Desktop (please complete the following information):

• macOS
• Chrome
• Version 89.0.4389.90 (Official Build) (x86_64)

const images = [900, 800, 700, 600, 500].map((size) => ({
src: https://placedog.net/${size}/${size}
}));

useEffect(() => {
    setDynamicImages(images);
    return () => {};
}, [setDynamicImages, images]);

Describe the bug
The component can't be imported into vanilla TS React project

To Reproduce
Follow the steps provided in the project's README, namely:

1. npm install --save react-gallery-carousel
2. import Carousel from 'react-gallery-carousel';
   Error: TS7016: Could not find a declaration file for module 'react-gallery-carousel'. '/Users/denis/project/my/z-nails/z-nails-web/node_modules/react-gallery-carousel/dist/index.js' implicitly has an 'any' type.
   Try npm i --save-dev @types/react-gallery-carousel if it exists or add a new declaration (.d.ts) file containing declare module 'react-gallery-carousel';

When we use "images" parameter, the thumbnails works great, but when we use children instead, thumbnail is exact the same like the main item.

It would be awesome to add thumbnailsChildren, where we can place separate thumbnails into the gallery.

e.g.

<Carousel
thumbnails={thumbnails.map(thumbnail => )}

{images.map(image => <MyImage src={image.src} {...image.renderSomething} />)}

Hi, I was looking through some examples and saw this code:

Doing this Is the same as not returning nothing and doesn't look like it helps to teach the lib, so I suggest to delete this line.

Right now if I double tap image in full screen mode it has zoom in effect, but it zooms also arrows and the whole window. After exiting zoom I can not slide any more until I click again on the arrow, after that everything starts to work normal.

It would be nice to have double-tap and 2 finger stretch zoom similar like amazon when open on mobile view:

https://www.amazon.de/gp/aw/d/B01C37CRZS/?_encoding=UTF8&pd_rd_plhdr=t&aaxitk=d0cbebe4194d6edc5093cd9cda6b705d&hsa_cr_id=5069197050902&ref_=sbx_be_s_sparkle_scm_asin_0_img&pd_rd_w=SpWBU&pf_rd_p=93aef975-2fed-4353-91a2-d32b278d7c02&pd_rd_wg=rBmS8&pf_rd_r=5RZJMMX3CJ35EZN88GSC&pd_rd_r=2787af93-7ff4-4207-9d1a-187bd98b598f#immersive-view_1624784083156

Describe the bug
If I use the soft touch of my Macbook trackpad and do not push it down physically in order to click the image to zoom in or out (maximizeOnClick and minimizeOnClick), it sometimes works and sometimes doesn't. This happens because the event.buttons property of the mouseDown-Event is randomly set to 0 or 1. As you check for it to be > 0, it randomly just does nothing.

It would be cool if you could remove the check for event.buttons > 0 from the handleMouseDown method for it to work on Macbooks again.

To Reproduce
Steps to reproduce the behavior:

1. activate shouldMaximizeOnClick and/or shouldMinimizeOnClick
2. Tap on the image using soft touch of trackpad multiple times
3. randomly it will do what you expect it to do or just do nothing without an error

Expected behavior
maximize and minimize work with trackpad

Desktop (please complete the following information):

• OS: iOS 12.6
• Browser Chrome
• Version 108.0.5359.94

Describe the bug
The error line:

() => (slidesRef.current.style.transitionDuration = null),

To Reproduce
Steps to reproduce the behavior:

1. Click on the page using the carousel
2. Click the browser back button to go back
3. Click forward to go back, the error will occur

Screenshots
https://gyazo.com/137e2ae73497db26a678f0dd0fffab61

Desktop (please complete the following information):

• OS: Windwos
• Browser Microsoft Edge

多谢！

I would like to use bigger thumbnails, is there a way to customize the thumbnails?

I love the way the thumbnails are scrolled, but when I click on some of them the transition is not that smooth.

Probably it would be possible to make some transition like this one:

https://www.linxtion.com/demo/react-image-gallery/

They thumbnails move more natural on transition.

I will see if I have time I could try to do some pull requests. ;)

Describe the bug
When using the package with typescript and react there is an issue on the type of goToIndex. It's type does not support any parameters, when it should support (index:number)

To Reproduce
Steps to reproduce the behavior:

1. Install react-gallery-carousel and @types/react-gallery-carousel
2. Click on try to use ref.current.goToIndex(1)
3. See error (Expected 0 arguments, but got 1.) on the "1" paramenter of goToIndex

Expected behavior
No type error when using the index parameter on goToIndex;
If I'm not wrong, the CarouselRef type should be:

    type CarouselRef<T = unknown> = T & {
        ...
        goToIndex(index: number): void;
    };

Describe the bug
Let's say I have two slides and both slides have an <a> tag around them. When viewing them on a phone (or the mobile view in a browser) and clicking on them, i won't navigate

To Reproduce

1. Create a new Gallery that doesn't maximize on click
2. wrap every slide with an a tag
3. view on a mobile device (or mobile view in a browser)
4. click the slide
5. You won't navigate

Expected behavior
I expect that a tags (and probably buttons, haven't tested those) still work normal when viewing them on mobile

Smartphone (please complete the following information):

• Device: any
• OS: any
• Browser: any

Please consider adding support for server-side rendering (SSR).

Here's what I got using your perfect (it is!) carousel with Gatsby:

"document" is not available during server side rendering.

See our docs page for more info on this error: https://gatsby.dev/debug-html

  2686 | var GalleryCarousel = function GalleryCarousel(props, ref) {
> 2687 |   var documentRef = useRef(document);
       |                           ^
  2688 |   var maximizedBackgroundRef = useRef(null);
  2689 |   var carouselRef = useRef(null);
  2690 |   var slidesContainerRef = useRef(null);


  WebpackError: ReferenceError: document is not defined

  - index.modern.js:2687
    [sns-front]/[react-gallery-carousel]/dist/index.modern.js:2687:27

To Reproduce
Use react-gallery-carousel with "images" and "hasCaptions" attributes. All caption elements have vertical and horizontal scrollbars even if the caption element doesn't require them.

Expected behavior
No scrollbars if they are not required.

To Fix
Replace "overflow: scroll" to "overflow: auto" caption's css style letting browser to handle scrollbars appearance.

Describe the bug
I managed to install dependencies but I still get this error:

./src/components/Carousel1.js
Cannot find file: 'TwoWayMap.js' does not match the corresponding name on disk: '.\src\utils\twoWayMap.js'.

And there is no such file under \utils\

To Reproduce

npm install
npm start

Fix
import TwoWayMap from '../utils/TwoWayMap';
needs to be
import TwoWayMap from '../utils/twoWayMap';

Is your feature request related to a problem? Please describe.
When hovering over the circular button, I have the title "Go" or "Stay".

Describe the solution you'd like
I would like to be able to change/translate these titles.

Describe alternatives you've considered
Or just be able to get them out of there.

Additional context

I use the react-gallery-carousel for different types of media, so I add media items as children. But even for <img ...> with alt attribute set those captions (alt text) doesn't show up. It works only when I use images attribute in .

Expect: the way to add caption for each {children} items.

Hi,
the live example looks really nice but

• the example in clone from repo doesn't work with npm start
• it doesn't render correctly when I install the library into my own project.

I don't know whats wrong but its pity that such nice looking library can not be implemented smoothly.

Hi yifaneye,

I am trying to make , user managed slide from an object which is having different kind of values and Photos[] array is one of among them but I am unable to use my Photos[] properly , when I used it with the map function of array it is showing photos but it is overlapping them on other slides too . Can you please tell me how can I do this properly so that each photo comes on different slide ?

Thanks,

It would be cool if we could swipe the carousel with the mouse wheel.

Great library.

Thank you!

Describe the bug
There is upstream conflict with react

To Reproduce
$npm install

Solution
Update package.json as such;

  "devDependencies": {
    "babel-eslint": "^10.0.3",
    "cross-env": "^7.0.2",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.7.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-config-standard-react": "^9.2.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.17.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-standard": "^4.0.1",
    "gh-pages": "^2.2.0",
    "microbundle-crl": "^0.13.10",
    "node-sass": "^5.0.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.0.4",
    "prop-types": "^15.7.2",
    "react": "^16.13.1 || ^17.0.2",
    "react-dom": "^16.13.1 || ^17.0.2",
    "react-scripts": "^3.4.1",
    "react-test-renderer": "^17.0.1 || ^17.0.2"
  },

Describe the bug
Only the first image is rendered, if I select another image it will just show a black background, thumbnails are rendered below correctly but when selecting any image other than the first it shows as black background

To Reproduce
Steps to reproduce the behavior:
1- run the example code in the "Usage" section of the readme
2- select a slide other than the first one, you will see a black screen

Expected behavior
All slides should render correctly

Screenshots

Desktop (please complete the following information):

• OS: Macos
• Browser :Firefox
• Version 113

Smartphone (please complete the following information):
Not tested

Additional context
N/A

Describe the bug
minIcon is the actual prop that Carousel component accepts as per the api(https://github.com/yifaneye/react-gallery-carousel#props) but @types/react-gallery-carousel has typo miniIcon

Please check the screenshots below

Issue:
I am using this in a nextjs project everything works but nextjs is not building the project because of the type error.

**Screens

Check last but one prop in the above image

next js build issue due to the typo.

This is the best carousel library. but i would like to request a feature to support video files.

I have Carousel with shouldMinimizeOnClick and shouldMaximizeOnClick. In mobile version maximize working great, but if I click on toggle device toolbar and click on image it doesn't work.

Steps to reproduce the behavior:

1. Go to https://yifaneye.github.io/react-gallery-carousel/
2. Open console and click on "Toggle device toolbar". Choose Some phone(for example IPhone XR)
3. Scroll down to carousel with shouldMaximizeOnClick
4. See error

Describe the bug
Touch-swiping does not work on the slides when the images are dynamically set in the useEffect() hook by developer users.

To Reproduce
Steps to reproduce the behavior:

1. Make a carousel and set the images in useEffect()
2. Swipe the slides part of the carousel (the slides part is in contract with the optional thumbnails part)
3. See error that touch-swiping does not work

Expected behavior
Touch swiping should work even if the images are dynamically set.

Screenshots
The GIF below is taken from the initial loading to the occurrence of the bug.

Desktop (please complete the following information):

• macOS
• Chrome
• Version 89.0.4389.90 (Official Build) (x86_64)

Is your feature request related to a problem? Please describe.
I am having trouble finding a good way to get the transitions to pause during a hover event on the carousel

Describe the solution you'd like
A boolean prop that allows us to 'pauseOnHover'

Describe alternatives you've considered
Tried using useEffect but I can't attach this to any hover event on the carousel

Additional context
Add any other context or screenshots about the feature request here.

One other demanded feature would be to have handlers outside of the Component, and also listeners before and after action.

E.g.

Handlers:
you could provide an ref to the HOC, and just call from outside this.galleryRef.setActiveSlide(3) or this.galleryRef.setFullScreen()

Listeners:
beforeSwipe, afterSwipe, beforeScreen

I think that are the only things that I am missing from other galleries. Else I really like your gallery! :)

Since we have className and styles for non-maximized view, it should be nice to have also such ones for maximized view.

I love the way material ui is doing this with the classes object:

https://material-ui.com/customization/components/

I think best would be something like

<Carousel
  classnames={{
    thumbnail: classNameOfThumbnail,
    activeThumbnail: classNameOfActiveThumbnail,
    maximizedCarousel: classNameOfMaximizedCarousel,
    image: classNameOfImage,
    imageContainer: classNameOfImageContainer,
    ...etc
  }}
>

I want to know that how can I access the index of a slide so that I can change my text accordingly.

Thanks,

Is your feature request related to a problem? Please describe.
I'm trying to move the thumbnails from the bottom to the right, like the image below which I did by modifying the CSS, but the problem is that mouse events (useMouse/useMouseDrag ?) only work on the X direction.

Describe the solution you'd like
Allow a new prop (orientation?) to be passed to mouse event handers (possibly separate for thumbnails and images).

Describe alternatives you've considered
None, not sure what I could try.

Additional context

What I want to do:

CSS, roughly:

<thumbnail> ul {
  display: flex;
  flex-direction: column;
}

<thumbnail> ul li {
  min-width: 100%;
  min-height: 10%;
}

Describe the bug
I load images from my back-end dynamicaly in the carousel. I want to display the dotButtons but at the firsts renders, the console is printing "Warning Failed prop type: The prop curIndex is marked as required in DotButtons, but its value is undefined."

To Reproduce
Steps to reproduce the behavior:

1. Load images asynchronously
2. Turn on the dotButtons display in the carousel
3. See the error in the console

Expected behavior
It doesn't crash the app and it keep the expected behavior when I navigate in the carousel (the active dot is correct, the unactives ones aswell and the total is good). But it still print a problem in the console.

Desktop :

• OS: Windows 10
• Browser: Mozilla Firefox
• Version 87.0

Describe the bug
The last slide is not displayed from the second loop in carousel with loop when there are exactly 2 slides.

To Reproduce
Steps to reproduce the behavior:

1. Make a carousel with loop and with 2 slides
2. Click on the right arrow button to loop all slides once
3. Click on the right arrow button to go to the last slide
4. See the error that the last slide is not displayed

Expected behavior
The last image should be display at the last index.

Screenshots
The GIF below is taken from the initial loading to the occurrence of the bug.

Desktop (please complete the following information):

• macOS
• Chrome
• Version 89.0.4389.90 (Official Build) (x86_64)

Describe the bug
Swipe on a slide (manual intervention) does not freeze autoplay countdown.

To Reproduce
Steps to reproduce the behavior:

1. Go to a carousel with autoplay capability
2. Click on the media button to start the autoplay, if the autoplay is not set to start automatically
3. Swipe a slide and do not release the slide
4. See error that the carousel advances to the next slide when the touch/mouse dragging has not finished

Expected behavior
The carousel should not advance to the next slide when the touch/mouse dragging has not finished

Screenshots

Desktop (please complete the following information):

• macOS
• Chrome
• Version 89.0.4389.90 (Official Build) (x86_64)

Describe the bug
I'm giving to the carousel the index parameter since I want to totally control the carousel. The bug is if I slide the carousel but for some external reason in my program I dont want the index to change, the image will still change but the arrows and dot buttons will still be corrects and remains at the right index.

To Reproduce
Steps to reproduce the behavior:

1. Declare a variable to store the index and give it to the carousel
2. Do not update this variable in the callback onIndexChange
3. See error : the image is still changing while the arrows and buttons are not following the same behavior and remains at the index passed in the component.

Expected behavior
Since the props index is passed, the displayed image should follow the index and shouldn't have it's own behavior.

Desktop:

• OS: Windows 10
• Browser: Opera GX

I use react-gallery-carousel with {chidren} to show different types of items in carousel (images, video and audio media).
It works fine but I cannot add the caption for the item.

Solution I'd like
Add special component that has required attributes like caption and supports {children} to handle user defined inner html as usual React component.

Describe the bug
A clear and concise description of what the bug is.
SyntaxError: Invalid or unexpected token
at wrapSafe (internal/modules/cjs/loader.js:1053:16)
at Module._compile (internal/modules/cjs/loader.js:1101:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
at Module.load (internal/modules/cjs/loader.js:985:32)
at Function.Module._load (internal/modules/cjs/loader.js:878:14)
at Module.require (internal/modules/cjs/loader.js:1025:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object. (C:\Users\Josh\Documents\pcswaps\swap-react\node_modules\react-gallery-carousel\dist\index.js:5:40)
at Module._compile (internal/modules/cjs/loader.js:1137:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
C:\Users\Josh\Documents\pcswaps\swap-react\node_modules\react-gallery-carousel\dist\placeholder.jpg:1
�PNG

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

I'm using Next.js in a monorepo with lerna but other than that I'm not exactly sure what's causing this issue. It looks like it might be trying to find placeholder.jpg(1) but I don't see why. I also cloned the repo and ran the next example and it seemed to work fine. I also tried not hoisting the this module and that didn't help. Kind of at a loss but I'm very excited to make use of this package. Been searching for some time for a good gallery that is performant rather than writing my own and it seems like you've done that.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS] Windows 10
• Browser [e.g. chrome, safari] chrome
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Describe the bug
A clear and concise description of what the bug is.

Sometimes lazy loaded images don't load. From what I can see it doesn't get switched to a real url when swiping or clicking the url so when the image is actually on screen this causes the gallery to try to load the image from https://{path}/[object%20Object]

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
   Not exactly sure how to reproduce consistently, but here is an example

Website has been updated to that issue is no longer present
This is our staging server. The login is dev/dev so you can see the behavior. I tried to do some debugging but couldn't find exactly what was causing the issue. The urls are definitely valid. This doesn't happen if lazy loading is disabled

Expected behavior
A clear and concise description of what you expected to happen.
Should lazy load the image

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS] windows 10
• Browser [e.g. chrome, safari] chrome
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6] iphone xr
• OS: [e.g. iOS8.1] latest
• Browser [e.g. stock browser, safari] safari
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

This does happen on my iphone as well. See specs above.

Hi,
first of all thanks for this amazing library.
are you planning to add types?

I'm using react with typescript.
For anyone in same situation, just put //@ts-ignore above the import.

Is your feature request related to a problem? Please describe.
Hello! Sorry to bother you again, but I would like to be able to display a custom image when the provided src url in the images array turns out to be a broken link. Right now it looks like the carousel deals with this case, but the placeholder image must be the one in the library. Since I can't provide image components directly (unless I use children which in this case, I would prefer not to), I have to defer to the carousel's custom error handling in case the url is not found, but I would like my fallback to be a bit more descriptive than the black rectangle currently provided as the library's fallback.

Describe the solution you'd like
It would be nice if there was a prop provided so that I can use a custom placeholder image.

Describe alternatives you've considered
I've looked into whether I can customize the placeholder image without requesting this feature, but ironically, because this library provides a fallback image, I can't simply add a css rule that only kicks in for broken images, and the lack of direct control over images unless I use the children prop severely limits any other options.

Additional context
Thank you!