Image path confusion in Angular2 example

Question

Referring to

Plunker

In app.component.ts, imagePath is defined at angular.png, However, in the codebase the image is actually named as angular.base64.png.

 <img [src]="imagePath">

How is the image still appearing ?

Answer 1

OK consider this,

Q: Can you create a folder named MyImages in given plunker?
A: Yes

Q: How?
A: Cick on the New File, a window popup will be asking for folder name, give it a name like MyImages.

So far so good.

Q: Now how about inserting or adding an image into MyImages folder? Is it possible?
A: I wonder I don't know how.

Note: In plunker adding an image into a folder is not as simple as adding image in windows-7/8/10 (try out yourself and check whether it is that easy?).

So question to your answer is,

.base64.png only shows/indicates base64 encoded file with .png extension. So it is just an image file encoded in base64. That's it.

And rest thing is as simple as using plunker. isn't it?

Answer 2

This is obviously a Plunker feature. Plunker doesn't allow to upload binary files but you can base64-encode a file and add it as text file with name.base64.ext and the iframe where the code runs gets access to the data using a name.ext URL.