图像未显示在 SAP UI5 网页中

Question

I am new to SAP UI5 and I am trying to develop a webpage with images and instructions.我是 SAP UI5 的新手，我正在尝试开发一个包含图像和说明的网页。 I am unable to display an image in my Webapp and need help with it.我无法在我的 Web 应用程序中显示图像，需要帮助。 I looked through the inte.net and could not find any proper solution yet.我浏览了 inte.net，还没有找到任何合适的解决方案。 Below is my code.下面是我的代码。 Can you please help me understand what I am missing?你能帮我理解我所缺少的吗？

index.html:索引.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:应用程序视图 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:应用程序.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:索引.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");
    });

});

Answer 1

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:您应该在 controller 中动态创建路径并将其放入视图 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当然，将正确的命名空间传递给sap.ui.require.toUrl非常重要

图像未显示在 SAP UI5 网页中

问题描述

1 个解决方案

解决方案1
0 2022-06-09 12:53:48

图像未显示在 SAP UI5 网页中

问题描述

1 个解决方案

解决方案1 0 2022-06-09 12:53:48

解决方案1
0 2022-06-09 12:53:48