search

MurhafSousli / ngx-gallery

Angular Gallery, Carousel and Lightbox
https://ngx-gallery.netlify.app/
MIT License
610 stars 129 forks source link

Please add a placeholder image or icon when the image item or thumbnail is unable to load. #374

Closed maurice85 closed 3 years ago

maurice85 commented 3 years ago

What is the expected behavior?

Show a font awesome icon of a broken link icon like this: https://fontawesome.com/v4.7.0/icon/chain-broken whenever the image does not render.

What is the current behavior?

Right now you only see blackness, its like there is a hole in the image caroussel and the user might wonder whats going on.

What are the steps to reproduce?

none

What is the use-case or motivation for changing an existing behavior?

Which versions are you using for the following packages?

Angular: Angular CDK: Angular CLI: Typescript: Gallery:

Is there anything else we should know?

Biden > Trump

MurhafSousli commented 3 years ago

Hi @maurice85 There is already an option to set the error template in case the image failed to load, use the loadingError to set the error template in the global config

I forgot to add to the docs, but now it is fixed https://github.com/MurhafSousli/ngx-gallery/wiki/Gallery-API

Example

galleryRef.setConfig({
  loadingError: '<i class="fa fa-watever"></i>'
});