I want to add the content of a page from the react page to power point. The image is stored in my local and the address is stored in props.image

const handleDownloadPPT = () => {
        const pptx = new pptxgen();
        const slide = pptx.addSlide();

        // Add content to the slide
        slide.addText('Patient', { fontSize: 20, bold: true, color: '0088CC' });
        slide.addText(`${props.age} year old ${props.sex === 'F' ? 'Female' : props.sex === 'M' ? 'Male' : 'Non-binary'}`, { fontSize: 14, color: '333333' });
        slide.addText('Chief Complaint', { fontSize: 20, bold: true, color: '0088CC' });
        slide.addText(props.complaint, { fontSize: 14, color: '333333' });

        // Add images
        if (props.image) {
            const imageSlide = pptx.addSlide();
            imageSlide.addImage({ path: props.image, x: 1, y: 1, w: 6, h: 4 }); 
        }

        // Download the PowerPoint presentation
        pptx.writeFile({ fileName: 'Webpage_Content.pptx' });
    };

This is the code that I have written. The content is getting displayed but the image is not shown. It says "this picture cant be displayed". what am I supposed to do? I am using the python library pptxgenjs