In module 3, you built a pipeline that generated DZI files for you to use, as well as an 

 file with information about all of those files. Now, take your sample viewer from module 2 and add those images to it.

 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:

const main = async () => {
  // The code is placed here.
};

main();

 API to grab the file. Once you get the response, you can use its 

 function to convert the JSON text into an object you can use.

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:

const tileSources = imageData.images.map((imageRec) => {
  return imageRec.imageUrl;
});

---
title: Loading the Images
description: Load the images into the viewer
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/rTlb00vIOjMe2ePXaY6fN2PFAfJLUb00Nm00TslH1ZxTok.m3u8
coverImageUrl: https://image.mux.com/rTlb00vIOjMe2ePXaY6fN2PFAfJLUb00Nm00TslH1ZxTok/thumbnail.png?time=116
code: https://gitlab.com/fullstackio/books/newline-course-apps/ian-gilman-newline-guide-to-displaying-huge-images-with-openseadragon-app/-/tree/main/code/module_04/lesson_04.01/src
---

## 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.

<ReplitEmbed
  src="//replit.com/@newlineauthors/OpenSeadragon-4-1-Loading-the-Images"
/>

### 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:

```javascript
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.

```javascript { actualFilename=./protected/src/main.js endChar=120 endLine=3 startChar=0 startLine=1 url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-displaying-huge-images-with-openseadragon/module_04/lesson_04.01/protected/src/main.js }
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:

```javascript { actualFilename=./protected/src/main.js endChar=216 endLine=7 startChar=122 startLine=5 statedFilename=main.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-displaying-huge-images-with-openseadragon/module_04/lesson_04.01/protected/src/main.js#L5 }
const tileSources = imageData.images.map((imageRec) => {
  return imageRec.imageUrl;
});
```

Loading the Images

In module 3, you build a pipeline that generated DZI files,

as well as a JSON file with information about all the files.

Now you'll take the sample viewer from module 2 and add those images to it.

For starters, we'll load the image-data.json and use that to build our

Start with the code from module 2 lesson 2.

We'll need to fetch the JSON, which means our code now needs to be asynchronous

We can do that by making an async function and calling it right away, like so.

We'll use the browser's fetch API to grab the file.

Once we get the response, we can use its JSON function to convert the JSON text

Once we have the image-data in a readable format, we can go through and make a

Note that we are just using the DZI URLs as tile sources rather than the object

There are many different ways to specify tile sources, and these are just a

Since we were using non-tiled images in module 2, we had to specify them using

With DZI, OpenSeadragon knows how to open the DZI file and read the info from it,

which is generally the easiest thing to do.

You can, however, also specify a DZI tile source directly as an object, like so

Note that this is all the information from the DZI file.

This can be handy if you have a lot of DZI files and you want to save yourself

You can load all of the data from them in a single call to the server and

Anyway, we don't need that extra control, so we'll just stick with the

Remember to use your local server as discussed in module 3 lesson 2.

Opening the HTML file directly in your browser won't work.

You should see all the images you converted lined up in a single row.

It's laid out like this because we're using the collection mode option with

collection rows 1, as discussed in module 3 lesson 2.

You're now loading all your converted images into the viewer.

In the next lesson, we'll get into the multi-image API so you can arrange them,

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript