[enter image description here][1]I am trying to make a Microsoft Office Add-in using the Office Javascript API. I am debugging it with VS Code. I am trying to open a dialog page using:

var url = new URI('src/taskpane/dialogbox.html').absoluteTo(window.location.origin).toString();
Office.context.ui.displayDialogAsync(url);

A new page opens however it displays 'Cannot GET /src/taskpane/dialogbox.html' and not the dialogbox.html

I am opening the dialog box from a taskpane. It gives the same error when I try to open a dialog box with the taskpane html instead (using the full directory: [src/taskpane/taskpane.html])

var url = new URI('src/taskpane/taskpane.html').absoluteTo(window.location.origin).toString();
Office.context.ui.displayDialogAsync(url);

Strangely, when I only write out taskpane.html and not the full directory it does load the html:

var url = new URI('taskpane.html').absoluteTo(window.location.origin).toString();
Office.context.ui.displayDialogAsync(url); 

What am I doing wrong? Am I misunderstanding something to do with the URLs. Thanks for your help

Link to image of folder structure in Visual Studio code: [1]: https://i.stack.imgur.com/36bd3.png