cancel
Showing results for 
Search instead for 
Did you mean: 

Image not displaying in SAP UI5 Webpage

1,258

0

I am very new to SAP UI5 and the programming world and I am trying to develop an SAP UI5 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");
    });

});

Accepted Solutions (0)

Answers (1)

Answers (1)

SergioG_TX
Active Contributor
0 Kudos

if your img1.jpg inside the images folder? this is where you're trying to read it from:

src=images/img1.jpg

the issue is just the relative path from where your image is....play w the path, it should be simple. look at this examples as well https://sapui5.hana.ondemand.com/#/entity/sap.m.Image