openseadragon: unable to [Object object]: Error loading image at

Question

I am experiencing some trouble using Openseadragon: This is my code for the viewer:

    <div id="viewer"></div>
 <script>
     var viewer = OpenSeadragon({
       preserveViewport: true,
       visibilityRatio: 1,
       defaultZoomLevel: 0,
       id: "viewer",
       sequenceMode: true,
       tileSources:  {
            type:'image',
            url:"https://api.digitale-sammlungen.de/iiif/presentation/v2/bsb10200197/canvas/1/view"},
       showFullPageControl: false,
       showHomeControl: false,
       prefixUrl: "https://cdn.jsdelivr.net/npm/[email protected]/build/openseadragon/images/"
     });
 </script>  

As you can see, I have a tileSource from the bayerische Staatsbibliothek in Germany. Whenever I access the url directly in the browser, the image opens as intended, however, when I'm in my viewer in receive the error

Unable to open [object Object]: Error loading image at https://api.digitale-sammlungen.de/iiif/presentation/v2/bsb10200197/canvas/1/view

Can anyone tell me what I'm doing wrong?

all the best and thanks in advance

Answer 1

Are you looking to use the IIIF tilesources here? If so you will need to use the IIIF Image Information url for the tileSource and not the canvas. I would also remove type: 'image'.

    <div id="viewer"></div>
 <script>
     var viewer = OpenSeadragon({
       preserveViewport: true,
       visibilityRatio: 1,
       defaultZoomLevel: 0,
       id: "viewer",
       sequenceMode: true,
       tileSources:  {
            url:"https://api.digitale-sammlungen.de/iiif/image/v2/bsb10200197_00001/info.json"},
       showFullPageControl: false,
       showHomeControl: false,
       prefixUrl: "https://cdn.jsdelivr.net/npm/[email protected]/build/openseadragon/images/"
     });
 </script>