Showing image as bits when using data-remote under BS3

[mickey9801]

I found that the "data-remote" attr isn't work with Bootstrap 3.3.7. It will showing bits rather than and image, even the image is loaded correctly within microseconds. Can anyone tell me how to fix it?

I am test it with Google Chrome. You may try it on official site: http://ashleydw.github.io/lightbox/bs3.html#data-remote

The screenshot:

[AdrianHL]

I have found the same issue today. I guess that the error is located in how the image is requested to the server because the same request is sent twice but the first one is requested as X-Requested-With: XMLHttpRequest even if the data-type is set to image.

In the library example it works for the youtube video (if you change the data-remote) but doesn't with the image. I'm trying to find the issue in the library code but it's not clear where it does the double request.

[ashleydw]

see http://ashleydw.github.io/lightbox/#force-type

[AdrianHL]

I have tried that and got the same result (using Bootstrap 3). Also tried the disable-external-check option.

In addition, as @mickey9801 said it is visible in this url http://ashleydw.github.io/lightbox/bs3.html#data-remote

[ashleydw]

Didn't realise it was Bootstrap 3 - I'm not sure, it looks like the entire content div is getting replaced. I suggest going back to an older version; something like https://github.com/ashleydw/lightbox/releases/tag/v3.3.3

[AdrianHL]

It works but there is an error in the console

Uncaught TypeError: url.indexOf is not a function
at jQuery.fn.init.jQuery.fn.load (libs.js:9857)
at Image.d.onload (project-view.js:14810)
  | jQuery.fn.load | @ | libs.js:9857
  | d.onload | @ | project-view.js:14810
  | load (async) |   |  
  | preloadImage | @ | project-view.js:14809
  | detectRemoteType | @ | project-view.js:14784
  | modal_shown | @ | project-view.js:14758
  | (anonymous) | @ | project-view.js:14748
  | dispatch | @ | libs.js:5183
  | elemData.handle | @ | libs.js:4991
  | trigger | @ | libs.js:8249
  | (anonymous) | @ | libs.js:8327
  | each | @ | libs.js:354
  | each | @ | libs.js:189
  | trigger | @ | libs.js:8326
  | (anonymous) | @ | libs.js:11383
  | fn | @ | libs.js:4932
  | handle | @ | libs.js:10437
  | dispatch | @ | libs.js:5183
  | elemData.handle | @ | libs.js:4991

The line 14810 is part of this library:

var b;return b = a("<img />"), b.attr("src", d.src), b.addClass("img-responsive"), e.lightbox_body.html(b), e.modal_arrows && e.modal_arrows.css("display", "block"), b.load(function () {
          return e.resize(d.width), e.options.onContentLoaded.call(e);
        });

Maybe it needs a different jQuery version but that will be too much downgrade to fix this. I'll try to attribute around the image with the image ref instead of using data-remote and see what I get.

[AdrianHL]

I wrapped the image with an element with the library data attributes and it does the job but the data-remote issue still there in BS3.

[mlt]

I suggest we rename data remote into something like src (data-src). Or maybe as a fallback in addition to data-remote so current library user's won't have to change existing code. It conflicts with Bootstrap 3 usage of remote modal that was deprecated and removed in BS 4.
https://getbootstrap.com/docs/3.4/javascript/#modals-options

[mlt]

Perhaps it can and should be done without renaming. The real culprit is copying data to _config and passing it along with data-remote to .modal.