Screenshot added in Extended report appears to be Broken

Iam using following dependency for extended reports, tried lower versions as well, Still image attached in report appeasr to be broken

<dependency>
    <groupId>com.aventstack</groupId>
    <artifactId>extentreports</artifactId>
    <version>5.0.6</version>
</dependency> 


This is the code used to get screenshot

public void takeScreenshot() {
   Date d=new Date();
   String screenshotFile=d.toString().replace(":", "_").replace(" ", "_")+".JPG";
   // take screenshot in file format of selenium
   File srcFile = ((TakesScreenshot)getcon().getcurrentDriver()).getScreenshotAs(OutputType.FILE);
   try {
      // get the dynamic folder name
      FileUtils.copyFile(srcFile, new File(ExtentManger.screenshotFolderPath+screenshotFile));
      //put screenshot file in reports
      test.log(Status.INFO,"Screenshot-> "+ test.addScreenCaptureFromPath(ExtentManger.screenshotFolderPath+screenshotFile));
      //test.log(Status.INFO,"Screenshot-> "+ MediaEntityBuilder.createScreenCaptureFromPath(ExtentManger.screenshotFolderPath+screenshotFile).build());
      //test.log(Status.INFO,"Screenshot-> "+ test.addScreenCaptureFromPath(ExtentManger.screenshotFolderPath+screenshotFile,ExtentManger.screenshotFolderPath+screenshotFile));
      //test.log(Status.FAIL, test.cr
   } catch (IOException e) {
      // TODO Auto-generated catch block
      e.printStackTrace();
   }


Whne i inspect the report, i can see the image file path , but do not load even if i try to load in new page

Am using a mac with IntelliJ