How to add local image of project folder in canvas? - reactjs

Question

I am trying to open a project folder image in the canvas without uploading it in a file input. But it is not showing there and I am using react-konva to add the image.
Here is the code where I am trying to upload the image:
const img = new window.Image();
img.src = require('../../../assets/images/71.png');
img.onload = function () {
const img_width = this.width;
console.log('the image', require('../../../assets/images/71.png'));
const img_height = this.height;
const max = img_width > img_height ? 100 : 100;
const ratio = (img_width > img_height ? (img_width / max) : (img_height / max))
setOriginalDim({ width: img_width, height: img_height });
setDimensions({ width: img_width/ratio, height: img_height/ratio });
const theImg = new Konva.Image({
image: this,
x: 0,
y: 0,
width: img_width/ratio,
height: img_height/ratio,
name: 'background_image',
draggable: true
});
if (layerRef.current != null) {
console.log('image', theImg);
layerRef.current.add(theImg);
layerRef.current.draw();
}
};
And my react component is this:
<Stage
width={dimensions.width}
height={dimensions.height}
onMouseDown={handleStageMouseDown}
style={{ backgroundColor: '#fff', boxShadow: '0 0 6px 0 #666' }}
ref={stageRef}
id="certificate_canvas"
>
<Layer
ref={layerRef}
/>
</Stage>
The onload part is not executing also the image is not loading into the canvas. How do I add the project folder image without uploading it

Answer 1

instead of this
img.src = require('../../../assets/images/71.png');
use
img.src = '../../../assets/images/71.png';
you dont need the require function