I'm encountering an issue with an <img> tag that isn't behaving as expected in my code snippet:
<div *ngFor="let familyPerson of userDataModel.family" class="col-md-6 col-lg-4 family-member">
<div class="fm-wrapper">
<div class="round-frame-bg">
<div class="round-frame wow animated">
<img [src] = 'familyPerson.image'>
</div><!-- /.round-frame -->
</div><!-- /.round-frame-bg -->
<p>{{familyPerson.qualities}}</p>
</div><!-- /.hide -->
</div><!-- /.col-md-4-->
userDataModel.family represents family members' properties in JSON format.
The src attribute is correct, but the image is not displaying in the browser.
Despite network activity showing the image has loaded, it remains invisible.
Oddly enough, replacing the <img> tag with one having a hardcoded src results in the image displaying properly.
What could be causing this issue and how might I resolve it?