# Loading .nii files in vtk.js using itk-wasm

**URL:** https://discourse.vtk.org/t/loading-nii-files-in-vtk-js-using-itk-wasm/12224
**Category:** vtk.js
**Tags:** vtkjs
**Created:** [August 31, 2023, 11:45pm UTC](https://discourse.vtk.org/t/loading-nii-files-in-vtk-js-using-itk-wasm/12224 "2023-08-31T23:45:31Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![vax](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/v/d78d45/32.png) [@vax](https://discourse.vtk.org/u/vax)
#### Post date: [August 31, 2023, 11:45pm UTC](https://discourse.vtk.org/t/loading-nii-files-in-vtk-js-using-itk-wasm/12224/1 "2023-08-31T23:45:31Z")

</div>

Hi everyone,

I need support understanding how to load .nii images using vtk.js. After going through some of the posts and conversations. I believe the way to do it is reading an array buffer into an itk image and then passing it to vtk.js renderer. Here is my code

```auto
import { readImageArrayBuffer } from "itk-wasm";
// Other Imports

 const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
        rootContainer: vtkContainerRef.current,
      });

      // Create renderer and render window
      const renderer = fullScreenRenderer.getRenderer();
      const renderWindow = fullScreenRenderer.getRenderWindow();

      // Create Mapper and Actor
      const actor = vtkImageSlice.newInstance();
      const mapper = vtkImageMapper.newInstance();

      mapper.setSliceAtFocalPoint(true);

      actor.setMapper(mapper);

      // Fetch Data
      fetch(niftiUrl)
        .then((res) => res.arrayBuffer())
        .then((data) => {
          readImageArrayBuffer(null, data, "nifti_temp_file.nii.gz").then(
            ({ image: itkImage, webWorker }) => {
              webWorker.terminate();
              const vtkImage = vtkITKHelper.convertItkToVtkImage(itkImage);

              mapper.setInputData(vtkImage);

              renderer.addActor(actor);
              renderer.resetCamera();
              renderWindow.render();
            }
          );
        });

```

However, on doing this I get an blank canvas. And there are no console errors, my api is sending data correctly. So I’m wondering if this is a camera positioning problem or am I incorrectly loading my data?

---

<div class="post-metadata">

### Author: ![Mikita\_P](https://discourse.vtk.org/user_avatar/discourse.vtk.org/mikita_p/32/8499_2.png) [@Mikita\_P](https://discourse.vtk.org/u/Mikita_P)
#### Post date: [February 22, 2024, 9:05am UTC](https://discourse.vtk.org/t/loading-nii-files-in-vtk-js-using-itk-wasm/12224/2 "2024-02-22T09:05:05Z")

</div>

Hi, have you been able to solve your problem?

---

<div class="post-metadata">

### Author: ![burak94t](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/b/a87d85/32.png) [@burak94t](https://discourse.vtk.org/u/burak94t)
#### Post date: [February 26, 2024, 9:21pm UTC](https://discourse.vtk.org/t/loading-nii-files-in-vtk-js-using-itk-wasm/12224/3 "2024-02-26T21:21:26Z")

</div>

You can try [@itk-wasm/image-io](https://insightsoftwareconsortium.github.io/itk-wasm/image-io/ts/docs/#/?id=itk-wasmimage-io), it has niftiReadImage function.