How to use the same path prefix for resources (css and images) for development and production environment?

Question

I am linking to resources such as css or image files in the application made with UI5 but I am facing a problem.

Usually, the path are for example:

return "css/style1.css"; // for a stylesheet inside the folder css
return "img/image.jpg"; // for a image inside the folder img

And once the application deployed it works fine but when running with SAP Web IDE both are not found resulting in the 404-error.

So for running in SAP Web IDE, showing the style and image the path is:

return "../../../../../webapp/css/style1.css"; #for a stylesheet inside folder css
return "../../../../../webapp/img/image.jpg"; #for a image inside folder img

And that is working running with SAP Web IDE but it's not clean. And I'm not sure either if it can work once it's deployed.

Is it a possible configuration or trick to be able to use standard link and run the app with SAP Web IDE for seing the result before to deploy?

When I had a similar problem, I solved it with [sap.ui.require.toUrl()](https://ui5.sap.com/#/api/sap.ui%23methods/sap.ui.require.toUrl). — Johann Goltz, Apr 09 '20 at 08:54
According to the doc sap.ui.namespace is deprecated since version 1.1, I would prefer to use a not deprecated way if there is such a possibility — SylwekFr, Apr 14 '20 at 06:56
Yes, `sap.ui.namespace` is deprecated, but not `sap.ui.require.toUrl()`. — Johann Goltz, Apr 14 '20 at 07:20

score 1 · Accepted Answer · edited Jun 04 '20 at 13:09

There is a solution to create a model for this: In model.js:

createImageRoot: function() {
  var oModel = new JSONModel({
    path: sap.ui.require.toUrl("the.namespace") // available since 1.58. Otherwise, use jQuery.sap.getModulePath instead.
  });
  oModel.setDefaultBindingMode("OneWay");
  return oModel;
},

In Component.js, add in the init method

this.setModel(models.createImageRoot(), "imageRoot");

And then for example :

return this.getView().getModel("imageRoot").getProperty("/path") + "img/image.jpg"

How to use the same path prefix for resources (css and images) for development and production environment?

1 Answers1