# VTK.js ImageData Rendering with react

**URL:** https://discourse.vtk.org/t/vtk-js-imagedata-rendering-with-react/15463
**Category:** vtk.js
**Tags:** vtkjs
**Created:** [April 2, 2025, 6:05am UTC](https://discourse.vtk.org/t/vtk-js-imagedata-rendering-with-react/15463 "2025-04-02T06:05:16Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![psb01126](https://discourse.vtk.org/user_avatar/discourse.vtk.org/psb01126/32/9897_2.png) [@psb01126](https://discourse.vtk.org/u/psb01126)
#### Post date: [April 2, 2025, 6:05am UTC](https://discourse.vtk.org/t/vtk-js-imagedata-rendering-with-react/15463/1 "2025-04-02T06:05:16Z")

</div>

Hello, I’m trying to develop a website using Python and react.

However, there is a problem that image data is generated normally, but rendering is not possible.

When I tested it with the conesource on the vtk homepage, it was rendered normally.

This is my Code

```auto
const width = pixelData[0].length;
      const height = pixelData.length;
      const depth = 1; // 단일 CT 슬라이스
      const values = new Int16Array(width * height * depth);
      for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
          values[y * width + x] = pixelData[y][x]; // 1D 배열로 변환
        }
      }   
      const dataArray = vtkDataArray.newInstance({
        numberOfComponents: 1,
        values,
        dataType: "Int16Array",
      });
      
      const imageData = vtkImageData.newInstance();
      imageData.setDimensions([width, height, depth]);
      imageData.setSpacing([rowSpacing, columnSpacing, 1.0]);
      imageData.setOrigin([0, 0, 0]);
      imageData.getPointData().setScalars(dataArray);
      imageData.modified();

const imageMapper=vtkImageMapper.newInstance();
      imageMapper.setInputData(dataArray);
      imageMapper.setSlicingMode(2);
      const imageActor=vtkImageSlice.newInstance();
      imageActor.setMapper(imageMapper);
      imageActor.getProperty().setInterpolationTypeToLinear();

      const renderer=fullScreenRenderer.getRenderer();
      const renderWindow = fullScreenRenderer.getRenderWindow();
  
      renderer.addActor(volume);
      renderWindow.render();

```

Pixel Data has been received by Pythons.

Is the imageData object itself a problem?

 ![image](https://discourse.vtk.org/uploads/default/original/2X/6/626d5b08b04de8116f11ed4953870b2eb07dbe2a.png)

---

<div class="post-metadata">

### Author: ![jadh4v](https://discourse.vtk.org/user_avatar/discourse.vtk.org/jadh4v/32/4149_2.png) [@jadh4v](https://discourse.vtk.org/u/jadh4v)
#### Post date: [April 7, 2025, 7:40pm UTC](https://discourse.vtk.org/t/vtk-js-imagedata-rendering-with-react/15463/2 "2025-04-07T19:40:13Z")

</div>

You don’t seem to be adding the `imageActor` to the renderer. You are calling

```auto
renderer.addActor(volume); // what is volume?

```

You will want to add the `imageActor` to the renderer, like this:

```auto
renderer.addActor(imageActor);

```