Accessing images in assets folder by URL in angular

Question

I'm trying to use a logo from my Angular application in my Spring backend when generating a PDF file of an invoice.

invoice.logo.url=http://localhost:4200/assets/gfx/img/logos/rkmteam-logo.png

The image doesn't show up on the PDF but when I upload it to lets say imgur.com then it works perfectly.

Manually going to the url sometimes shows the picture but sometimes gives me this error:

Error: Cannot match any routes. URL Segment: 'assets/gfx/img/logos/rkmteam-logo.png'

How can I access the images in external applications? I dont want to rely on third party sites (imgur and such).

score 0 · Answer 1 · answered Jan 29 '20 at 10:31

0

You have to convert the image to base64 string and add it to your PDF invoice.

To convert your images to base64 check : Converting an image to base64 in angular 2

answered Jan 29 '20 at 10:31

Oussail

2,200
11
24

Why does it work sometimes and not all the time tho, just via URL? – eixcs Jan 29 '20 at 10:38
I'm not sure why, but the good way is to convert your image to base64 then add it to your pdf. – Oussail Jan 29 '20 at 10:55

Ch Ryder · Accepted Answer · 2020-01-29T12:58:07.583

If I understand you correctly, then your Springboot application needs to access your Angular application to retrieve the image.

To make this work, you would need to make sure that the images are publicly accessible through the /assets folder in Angular. Verify your angular.json file to make sure this is correctly set up.

Having said that, I would not recommend this circular setup. Ideally, the back-end should be front-end agnostic, yet you would make it a hard dependency.

Instead, I would consider looking at hosting the logos within Springboot. If that's not possible, I would think about encoding the logos with Base64 and passing the encoded strings to Springboot in that way.

Accessing images in assets folder by URL in angular

2 Answers2