Captions break blob URLs

giannisftaras commented 2 years ago

If we specify a blob URL in the data-src attribute the library automatically adds the &caption= query string at the end of the image which breaks functionality and the image is not displayed.

I suggest modifying the data-footer attribute which will add the caption to the modal footer but not as a query string on the image URL.

trvswgnr commented 2 years ago

@giannisftaras Do you think you could post a screenshot or some code so I can try to understand this issue better?

giannisftaras commented 2 years ago

@trvswgnr Here is a similar example of the code that I've used.

When you load a new image via the file input, it is then converted to blob and then attached to the data-src attribute. Once the file is loaded and the lightbox element is clicked we can see that the image is broken. Upon inspection in the Developer Tools we can also see that the URL in the modal will contain a new &caption= query string at the end of the URL.

If you remove the &caption= query string manually from the end of the URL the image will load correctly.

Screenshot_1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <style>
        .up-img {
            width: 500px;
            height: 500px;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col">
                <div class="mb-4">
                    <div class="up-img" data-toggle="lightbox" data-src="" data-footer="Example Image" data-type="image"></div>
                </div>
                <div class="mb-3">
                    <label for="formFile" class="form-label">Upload image</label>
                    <input class="form-control" type="file" id="formFile">
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/bs5-lightbox@1.8.0/dist/index.bundle.min.js" integrity="sha384-KRDXrqViYzH3P+bkvjuuGlOvMgmJ4lG4OUv6V3bMcImc8BqyfOG4N6iW/T4yqJ/v" crossorigin="anonymous"></script>
    <script>
        $('#formFile').on("change", function(){
            var img_blob = URL.createObjectURL(this.files[0]);
            $(".up-img").css("background-image", "url(" + img_blob + ")");
            $(".up-img").attr("data-src", img_blob);
        });
    </script>
</body>
</html>

trvswgnr commented 2 years ago

@giannisftaras thanks! I will take a look at this and try to recreate.

trvswgnr commented 1 year ago

@giannisftaras this has been fixed in v1.8.1

trvswgnr / bs5-lightbox

Captions break blob URLs #19