0

I am new to SAP UI5 and I am trying to develop a webpage with images and instructions. I am unable to display an image in my Webapp and need help with it. I looked through the internet and could not find any proper solution yet. Below is my code. Can you please help me understand what I am missing?

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
        <title>My App</title>
    

    <script
            id="sap-ui-bootstrap"
            src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
            data-sap-ui-theme="sap_belize"
            data-sap-ui-libs="sap.m"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-async="true"
            data-sap-ui-onInit="module:sap/ui/demo/walkthrough/index"
            data-sap-ui-resourceroots='{
                "sap.ui.demo.walkthrough": "./"
            }'>
        </script>
    <style>
        .myimage{float:right !important; width:300px; height:200px;}
    </style>
</head>
<body class="sapUiBody" id="content">
    
</body>

</html>

App.view.xml:

<mvc:View
    controllerName="sap.ui.demo.walkthrough.controller.App"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
>
<Page title="Image">
    <content>
        <Image id="QRCode" src="images/img1.jpg" />
    </content>
</Page>
</mvc:View>

App.controller.js:

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function(
    Controller
) {
    "use strict";

    return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
        onBeforeRendering: function() {
            this.getView().byId("QRCode").addStyleClass("myimage");
            },
    });
});

index.js:

sap.ui.define([
    "sap/ui/core/mvc/XMLView"
], function (XMLView) {
    "use strict";

    XMLView.create({
        viewName: "sap.ui.demo.walkthrough.view.App"
    }).then(function (oView) {
        oView.placeAt("content");
    });

});
Adrija Ghosh
  • 1
  • Does this answer your question? [Is there a stable solution for loading images in SAP UI5 App?](https://stackoverflow.com/questions/55748144/is-there-a-stable-solution-for-loading-images-in-sap-ui5-app) – Boghyon Hoffmann Jun 09 '22 at 13:34

1 Answers1

0

Loading images is a little tricky, especially if you want it to run in the launchpad.

You should create the path dynamically in your controller and put it into a view model:

const sPath = sap.ui.require.toUrl("sap/ui/demo/walkthrough/images/img1.png");
const oModel = new JSONModel({ imagePath: sPath });
this.getView().setModel(oModel, "view");

<Image id="QRCode" src="{view>/imagePath}" />

Of course it's very important to pass the correct namespace to sap.ui.require.toUrl

Marc
  • 6,051
  • 5
  • 26
  • 56