Hi All,
Below is my SAPUI5 project in BAS where I am facing some error. Below is the error -

The resource couldn't be loaded as the path couldn't be resolved. Below is my code snippet. Could anyone advise why the resource load isn't happening? What am I missing here?
I defined the attribute data-sap-ui-resourceroots='{"com.dc": "./"}'. It points to the root folder atleast that is what I hope. Also same namespace is defined and passed as a configuration object during the method call sap.ui.xmlview(). The property viewName is pointing to the namespace.<view folder>.App.
What is wrong here? Please advise.
index.html code snippet
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Week1 - getting Started</title>
<script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async" data-sap-ui-resourceroots='{"com.dc": "./"}'>
</script>
<script>
sap.ui.getCore().attachInit(() => {
/* let oImage = new sap.m.Image({
src: "https://picsum.photos/id/237/200/300"
}).placeAt("content");
});
*/
sap.ui.xmlview({
viewName: "com.dc.view.App"
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
App.view.xml code snippet
<mvc:View displayBlock="true" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<Carousel>
<pages>
<Image src="https://picsum.photos/id/237/200/300" height="400px" />
<Image src="https://picsum.photos/seed/picsum/200/300" height="400px" />
</pages>
</Carousel>
</mvc:View>
Below is the folder structure of the project

Regards,
Ravenclaw.