I want to display images from filesystem could be jpeg, png, nef, raw, svg etc. in browser. Some of these types like nef, raw are not natively supported by browser and I want to convert them to jpeg (and also to compress it in size) and display it. Below is my (not working) code. I have googled extensively and could not find a way to perform the conversion. The below code ends up triggering onerror callback in Image. Im a relative newbie to JS and would appreciate help/apointers on what needs to happen and the whys if you can. Thanks _/_.

        private static async toImg(file: File): Promise<HTMLImageElement> {
        let img = new Image()
        let output = new Promise<HTMLImageElement>((resolve, reject) => {
            img.onload = () => {
                resolve(img)
            }
            img.onerror = (err) => {
                console.log(err)
            }
            let reader = new FileReader()
            reader.onloadend = (e) => {
                let data = reader.result as string
                let blob = new Blob([data], {type: 'image/jpeg'})
                img.src = URL.createObjectURL(blob)
            }
            reader.readAsDataURL(file)
        })
        return output
    }