I am currently making a web application where I can upload csv data and pictures on the application and display them. Currently I am stuck because I'm not able to show the images I imported. I import images in from my local drive with:
<li *ngIf="loadService.getLoads().length > 0"> <input type="file" (change)="loadService.importPictures(loadService.getLoads(),$event)" name="datafile" size="40" multiple> </li> If the csv list is not imported or empty then the second button to load images will not be displayed. The images are then being put in a Load model class which has a field called picture of type File. The method of ImportPictures simply adds the correct picture to the corresponding load.
I want to be able to use this File in an image html tag but I can't seem to get it to work? Is there a way to do this?
I tried something like this:
<img *ngIf="load.picture" name="recipient" [(ngModel)]="load.picture" src="{{load.picture}}" ngDefaultControl/> 1 Answer
Browsers will not give you the full path to the files when using a file upload so the only way you will be able to display them is to have them within the same folder as your html file. Then you can do:
<img [src]="load.name"/> But this will only work in a strictly controlled environment. To use the files outside of purely development environment you will need to first upload the files somewhere and then display them by binding the src property against the newly created url.
5
