CODEWITHSUNDEEP
sapui5
simon
simon

Reputation: 101

Probleme loading image

i am showing a table of picture in the page 

    var oTemp = new sap.m.ColumnListItem({
            vAlign: "Middle",
            cells: [
                new sap.m.VBox({
                    items: [

                        new sap.m.Image({
                            src: {
                                path: "myModel>ImageLink",

                            },

                            densityAware:false,
                            decorative: false,
                         error: function(oEvent) {
                            this.setSrc(oEvent.getSource().getProperty("src"));

                            }
                        })
                    ]
                })
            ]
        });
        otable.bindItems({
            path: "myModel>/Images",
            template: oTemp
        });

znd in xml 

            <m:Table id="imageTable">

                                <m:headerToolbar>
                                    <m:OverflowToolbar>
                                        <m:Title text="some text"/>
                                    </m:OverflowToolbar>
                                </m:headerToolbar>
                                <m:columns>
                                <m:Column>
                                </m:Column>
                                </m:columns>
                               </m:Table>

and it always enter in the error function despite in the debugger the image is l but once i open the image elsewhere the images are loaded perfectly

Upvotes: 0

Views: 1400

Answers (1)

D. Seah
D. Seah

Reputation: 4592

Will this help? http://jsbin.com/xusikeh/edit?html,output

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <script 
            src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" 
            id="sap-ui-bootstrap" 
            data-sap-ui-theme="sap_bluecrystal" 
            data-sap-ui-xx-bindingSyntax="complex" 
            data-sap-ui-libs="sap.m"></script>
    <style type="text/css">
      .sapMObjLTitle {
        cursor: pointer;
      }
    </style>

    <!-- XML-based view definition -->
    <script id="oView" type="sapui5/xmlview">
    <mvc:View height="100%" controllerName="myView.Template"
      xmlns:core="sap.ui.core"
      xmlns:mvc="sap.ui.core.mvc"
      xmlns:m="sap.m">
      <m:Table id="imageTable">
        <m:headerToolbar>
          <m:OverflowToolbar>
            <m:Title text="some text" />
          </m:OverflowToolbar>
        </m:headerToolbar>
        <m:columns>
          <m:Column>
          </m:Column>
        </m:columns>
      </m:Table>
      </mvc:View>
    </script>

    <script>
      sap.ui.define([
        'jquery.sap.global',
        'sap/ui/core/mvc/Controller',
        'sap/ui/model/json/JSONModel',
        'sap/m/ColumnListItem',
        'sap/m/VBox',
        'sap/m/Image'
      ], function(jQuery, Controller, JSONModel, ColumnListItem, VBox, Image) {

        return Controller.extend("myView.Template", {
          onInit: function(oEvent) {
            var oView = this.getView();
            var oTable = oView.byId("imageTable");

            oTable.bindItems({
              path: "myModel>/Images",
              template: new ColumnListItem({
                vAlign: "Middle",
                cells: new sap.m.VBox({
                  items: new Image({
                    src: '{myModel>ImageLink}',
                    densityAware:false,
                    decorative: false
                  })
                })
              })
            });


            oView.setModel(new JSONModel({
              Images: [{
                ImageLink: "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
              }]
            }), "myModel");
          }
        });
      });


      var oView = sap.ui.xmlview({
        viewContent: jQuery('#oView').html()
      });

      oView.placeAt('content');


    </script>

  </head>
  <body class="sapUiBody">
    <div id='content'></div>
  </body>
</html>

Upvotes: 1

Related Questions