Pfthb

I am uploading image from my local machine and storing on firebase and generating downloadUrl, with that download url i want to render the image with src tag on the same page but the image is not rendering here is my code for uploading image:-

<div class="form-group">
 <label for="image">Image</label>
 <input #imageurl="ngModel" [(ngModel)]="imagedetails" name="imageurl" id="imageurl" type="file" (change)="onselected($event)" class="form-control" required>
 <div class="alert alert-danger" *ngIf="imageurl.touched && imageurl.invalid">
 Invalid Image Url

 </div>
 </div>

 <!--Save Button-->
 <button class="btn btn-primary">Save</button>
 </form>
 </div>

 </div>
 <div class="col-md-6">
 <div class="card" style="width: 18rem;">
 downloadUrl
 <img class="card-img-top" [src]="downloadUrl" >
 <div class="card-body">
 <h5 class="card-title">title.value</h5>
 <p class="card-text">price.value</p>
 </div>
 </div>
 </div>

 </div>

In my component.ts i wam generating downloadUrl and setting that downloadUrl to src tag below is my component.ts:-

 onselected(event)
 
 console.log("The Select File is",event.target.files[0]);
 let name=event.target.files[0];
 console.log("THe Name is",name.name);
 const metadata='contentType':name.type;
 let url1="url3";
 const storageRef:firebase.storage.Reference=firebase.storage().ref('/images/feature/'+url1);
 storageRef.put(name,metadata);
 storageRef.getDownloadURL().then(downloadURL => 
 const imageUrl = downloadURL;
 this.downloadUrl=imageUrl;
 console.log('URL:' + imageUrl);
 )

 
 save(product)
 
 console.log("The Catagory",this.catagoryData);
 console.log("The ImageData is",this.imagedetails);
 product.imageUrl=this.downloadUrl;
 product.url=this.downloadUrl;
 console.log("The Prodcut is",product);
 this.catagory.createProduct(product);

 

Please help to solve issue how i can display image as soon as i upload it on to the form