Logo appearing as "broken image" in print preview in Fiori Launchpad

[former_member417246]

Hi,

I am working on a UI5 application wherein I need to provide a print button. When user clicks on this button, print preview should open and then the option to print.

The problem is, when the application is run standalone then I am getting the logos in print preview. But when I run it through Fiori launchpad, I am getting logos as "broken image".

Earlier, I wasn't even getting the logos in the application when launched through launchpad but that was resolved by setting the resource path to a model. The same approach I tried to follow for the print preview as well but it didn't work.

Any help will be highly appreciated.

Thanks in Advance!

[keith_nunn]

Hi, Rajinder.

Are you getting any errors on the image resource file in the HTTP log of the browser? Also, can you provide code snippets to show how you're handling the logo image in your app?

Thanks,

Keith Nunn
SAP Product Support

[former_member417246]

Hi Keith,

No, I am not getting any errors in the networks tab of the browser. Images are loading properly. Below is the code where I am setting the page header of print preview:

var header1 = '<div id="container" style="display: flex; flex-direction: row; flex-wrap: nowrap;"><div><img src="images/Logoone.jpeg"></div>'+ '<div style="text-align:center; margin:auto;"><h4>ABC</h4><h4>XYZ</h4></div>'+ '<div><img src="images/Logotwo.jpeg">'+ '<img src="images/Logothree.jpeg"></div></div>';

Please check the attachment for project structure.

Thanks,

Rajinder Singh

[enric101]

Hi again

Try to put "/" in your images paths

var header1 = '<div id="container" style="display: flex; flex-direction: row; flex-wrap: nowrap;"><div><img src="./images/Logoone.jpeg"></div>'+ '<div style="text-align:center; margin:auto;"><h4>ABC</h4><h4>XYZ</h4></div>'+ '<div><img src="./images/Logotwo.jpeg">'+ '<img src="./images/Logothree.jpeg"></div></div>';

Although I recommend using standard sapui5 controls:

Image control - UI5

Regards

[enric101]

Hi,

Where are allocated these logos? Are these logos in the application ui5 as a images? In this case most possible are the path of this images.

Could you provide the code where you print this images?

Regards

[former_member417246]

Hi,

Yes, these logos are there in the UI5 application.

Below is the code which I am using for setting the header of the page:

var header1 = '<div id="container" style="display: flex; flex-direction: row; flex-wrap: nowrap;"><div><img src="images/Logoone.jpeg"></div>'+ '<div style="text-align:center; margin:auto;"><h4>ABC</h4><h4>XYZ</h4></div>'+ '<div><img src="images/Logotwo.jpeg">'+ '<img src="images/Logothree.jpeg"></div></div>';

Please check the attachment for file structure.

Regards.