Loading the Images

Multi-Image#

In module 3, you built a pipeline that generated DZI files for you to use, as well as an image-data.json file with information about all of those files. Now, take your sample viewer from module 2 and add those images to it.

Loading the Images#

To begin, load the image-data.json and use that to build your tileSources option. Start with the code from module 2, lesson 2, "Sequence and Collection Modes". You'll need to fetch the JSON, which means your code now needs to be async. You can do that by making an async function and calling it right away, like so:

xxxxxxxxxx

const main = async () => {

  // The code is placed here.

};

​

main();

Use the browser's fetch API to grab the file. Once you get the response, you can use its json function to convert the JSON text into an object you can use.

xxxxxxxxxx

const main = async () => {

  const response = await fetch('image-data.json');

  const imageData = await response.json();

Once you have the image data in a readable format, you can go through and make a set of tile sources with it, like so:

xxxxxxxxxx

const tileSources = imageData.images.map((imageRec) => {

  return imageRec.imageUrl;

});