search

trvswgnr / bs5-lightbox

A pure JS lightbox gallery plugin for Bootstrap 5 based on the Modal and Carousel components
https://trvswgnr.github.io/bs5-lightbox/
MIT License
125 stars 28 forks source link

Error when using lightbox with data:image URLs that are base64 #48

Open muftaye opened 1 year ago

muftaye commented 1 year ago

I get the below error when trying to use the lightbox with data base64 urls. Everything works excepts when clicking on the image, the lightbox does not open and the error below is provided in the console.

      Failed to construct 'URL': Invalid URL

Here is the code I am using. It works fine when I use an actual URL to an image on the server, but not with data base64 URLs.

`

`

Does this not support these data URLs? Or am I doing something wrong for this specifically?

trvswgnr commented 1 year ago

Currently it uses URL to construct the url, so no that wouldn't be supported currently. Maybe I can add a check for data: and use the raw string. In the meantime maybe you could use the HTML type with an image tag?

<p>
  <a href="#" data-src="<img src='data:image...'>" data-type="html" data-title="Custom HTML" data-toggle="lightbox" data-gallery="custom-html">Custom HTML</a>
</p>
muftaye commented 1 year ago

Yea that works too. I think adding the check to not construct the url if its a data url or adding a new data type would both work as well.

trvswgnr commented 1 year ago

Reopening this for feature planning.