no image loader for imageId

[haoxl3]

I use the imageId for this case,https://www.cornerstonejs.org/live-examples/stackbasic,but I got an error my code:

import styles from './index.less';
import {useEffect} from 'react';
import { RenderingEngine, Enums, init as csRenderInit } from '@cornerstonejs/core';
const LabelPage = () => {
    const initHandle = async () => {
        const imageId = "wadors:https://d1qmxk7r72ysft.cloudfront.net/dicomweb/studies/1.3.6.1.4.1.14519.5.2.1.7009.2403.334240657131972136850343327463/series/1.3.6.1.4.1.14519.5.2.1.7009.2403.226151125820845824875394858561/instances/1.3.6.1.4.1.14519.5.2.1.7009.2403.811199116755887922789178901449/frames/1";
        // const imageId = "wadors:https://tools.cornerstonejs.org/examples/assets/dicom/bellona/chest_lung/1.dcm";
        const element = document.getElementById('content');
        const renderingEngineId = 'myRenderingEngine';
        const viewportId = 'CT_STACK';
        await csRenderInit();
        const renderingEngine = new RenderingEngine(renderingEngineId);
        const { ViewportType } = Enums;
        const viewportInput = {
            viewportId,
            element,
            type: ViewportType.STACK,
            defaultOptions: {
                background: [0, 0, 0]
            }
        };
        renderingEngine.enableElement(viewportInput);
        const viewport = renderingEngine.getViewport(viewportInput.viewportId);
        const stack = [imageId];
        await viewport.setStack(stack);
        viewport.render();
    };
    useEffect(() => {
        initHandle();
    }, []);
    return (
      <div id="content" className={styles.content}>
          <div className={styles.flexBox}>
              <div className={styles.flexItem}></div>
              <div className={styles.flexItem}></div>
              <div className={styles.flexItem}></div>
          </div>
      </div>
    );
};
export default LabelPage;

"@cornerstonejs/core": "^0.13.9", "@cornerstonejs/streaming-image-volume-loader": "^0.4.9", "@cornerstonejs/tools": "^0.20.13", "@kitware/vtk.js": "^25.2.2", "cornerstone-wado-image-loader": "^4.1.3", "dcmjs": "^0.24.4", "dicom-parser": "^1.8.13", "gl-matrix": "^3.4.3",

[LSanchez94]

Hi @haoxl3 ,

I was having the same issue, the problem is that you need to register an ImageLoader so that it can work.

like this one:

import cornerstoneWADOImageLoader from "cornerstone-wado-image-loader";

  cornerstoneWADOImageLoader .external.cornerstone = cornerstone;

  cornerstone.imageLoader.registerImageLoader(
    "https",
    cornerstoneWADOImageLoader .loadImage
  );
  
  try instaling this loader and adding this code.
  
  

[haoxl3]

@LSanchez94 Thank you very much! Did you implement the crossHairs case? my code is here, I got error:

[LSanchez94]

Hi @haoxl3 sorry I can't help you with that, I'm just using the stack viewport for now.

[sedghi]

I think you have not initialized the cornerstoneWADOImageLoader, you can check here