I'm facing an issue in my Angular project where I have the following code snippet:
onChange(event: any) {
var reader = new FileReader();
reader.onload = (event: any) => {
this.url = event.target.result;
};
reader.readAsDataURL(event.target.files[0]);
}#upload-icon {
align-items: center;
font-size: 30px;
}
.image-content {
width: 70px;
height: 70px;
}
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
padding: 6px 12px;
cursor: pointer;
height: 70px;
width: 70px;
border-radius: 50%;
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
}
img {
border-radius: 50%;
height: 70px;
width: 70px;
object-fit: contain;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<label class="custom-file-upload">
<input type="file" accept="image/*" capture="environment" class="fileInput" id="file-input"
(change)="onChange($event)">
<div class="image-content" *ngIf="!url">
<i class="far fa-images"></i>
</div>
<div class="image-content" *ngIf="url">
<label for="file-input">
<img [src]="url"/>
</label>
</div>
</label>The aim is to create a circular shape with a 1px border that displays an icon representing image upload functionality. Clicking on the circle allows users to select an image file, and upon uploading, the circle will show the selected image. To fix the issue of the icon and image not being centered as desired, refer to these images for better understanding: https://i.stack.imgur.com/DVfHD.png and https://i.stack.imgur.com/cAypH.png
Any suggestions on how to resolve this alignment problem?