OpenSeadragon в Angular 7 - PullRequest
Новая
       34

OpenSeadragon в Angular 7

0 голосов
/ 02 апреля 2019

Я пытаюсь получить базовый пример OpenSeadragon v2.4, работающего в Angular 7. Я правильно импортировал модуль npm, и он работает в некоторой степени.

Я смотрю на этот простой пример здесь . Вот мой код: 

var duomo = {
  Image: {
    xmlns: "http://schemas.microsoft.com/deepzoom/2008",
    Url:  "//openseadragon.github.io/example-images/duomo/duomo_files/",
    Format: "jpg",
    Overlap: "2",
    TileSize: "256",
    Size: {
      Width: "13920",
      Height: "10200"
    }
  }
};
  var viewer = OpenSeadragon({
    element: this.viewer.nativeElement,
    prefixUrl: "//openseadragon.github.io/openseadragon/images/",
    showNavigator:true,
    tileSources: duomo
  });

Когда я запускаю его, элемент canvas создается, но изображения не загружаются в мой компонент.

Когда я смотрю на вкладку Сеть в WebKit, она находит первый файл: http://openseadragon.github.io/example-images/highsmith/highsmith_files/1/0_0.jpg,, который кажется пустым. Страница пуста.

Если я помещу недоступное значение для tileSources, изображение не будет найдено, но элементы управления масштабированием будут отрисованы.

Является ли приведенный выше код правильным способом ссылки на пример URL с моего локального компьютера? Почему рендерится только первое изображение / плитка? Ищет что-то еще?

1 Ответ

1 голос
/ 02 апреля 2019

Я нашел свою проблему.Я не добавил ширину и высоту к используемому элементу HTML.Вот что я забыл: 

<div id="seadragon-viewer" style="width:800px; height:600px;" #viewer></div>
...