how to preview images inside a dialog box?

Hello Everyone, 

Is there a way to preview images inside a dialog box in photoshop MacOS? I tried a lot of ways to do it but I am always stuck with Error 509: Invalid image data. 

Not sure if photoshop allows it. Please help. I have also dropped some of the scripts I explored.

Method 1:

#target photoshop

// create a new dialog window
var dlg = new Window("dialog", "Image Preview");

// create a panel to hold the image container
var panel = dlg.add("panel", undefined, "Preview");

// create an image container inside the panel
var defaultImage = new File("~/Desktop/placeholder.png"); // change to the path of your default image file
var imageContainer = panel.add("image", [0, 0, 300, 300], defaultImage);

// create a button to open an image
var button = dlg.add("button", undefined, "Open Image");

// set the dimensions and alignment of the dialog box elements
button.size = [100, 30];
button.alignment = "center";

panel.alignment = "center";
panel.margins = [10, 10, 10, 10];

imageContainer.alignment = "center";

// define a function to handle the button click
button.onClick = function() {
  // open a file dialog to select an image
  var file = File.openDialog("Select an image", "*.jpg;*.jpeg;*.png");

  if (file) {
    // set the image container to display the selected image
    imageContainer.image = ScriptUI.newImage(file);
  }
}

// display the dialog box
dlg.show();

Method 2:

function main() {
    inputFolder = Folder.selectDialog("Please select the folder with Files to process");
    var fileList = inputFolder.getFiles(/\.(jpg|jpeg)$/i);

    Image.prototype.onDraw = function () { // written by Marc Autret
        // "this" is the container; "this.image" is the graphic
        if (!this.image) return;
        var WH = this.size,
            wh = this.image.size,
            k = Math.min(WH[0] / wh[0], WH[1] / wh[1]),
            xy;
        // Resize proportionally:
        wh = [k * wh[0], k * wh[1]];
        // Center:
        xy = [(WH[0] - wh[0]) / 2, (WH[1] - wh[1]) / 2];
        this.graphics.drawImage(this.image, xy[0], xy[1], wh[0], wh[1]);
        WH = wh = xy = null;
    };

    var win = new Window("dialog", "Image test");
    win.pnl1 = win.add('panel', undefined, undefined, {
        borderStyle: 'black'
    });
    win.pnl1.preferredSize = [200, 200];
    win.Im1 = win.pnl1.add("image", undefined);
    var imageFile = new File(fileList[0]);
    win.Im1.image = imageFile;
    win.Im1.size = [180, 180];
    win.pnl2 = win.add('panel', undefined, undefined, {
        borderStyle: 'black'
    });
    win.pnl2.bu1 = win.pnl2.add('button', undefined, 'Next');
    win.pnl2.bu2 = win.pnl2.add('button', undefined, 'Previous');
    win.grp100 = win.add('group');
    win.grp100.bu1 = win.grp100.add('button', undefined, 'Cancel');
    var PIC = 0;
    win.pnl2.bu1.onClick = function () {
        //Next picture
        if (PIC == fileList.length - 1) return;
        PIC++;
        win.Im1.image = File(fileList[PIC]);
    };
    win.pnl2.bu2.onClick = function ()
    //Previous
    {
        if (PIC == 0) return;
        PIC--;
        win.Im1.image = fileList[PIC];
    }
    win.show();
}
main();

Thanks in advance.