Delay showing an image

I am showing a profile image for the logged in user. If they haven’t uploaded one then I’m showing a general silhouette instead. I’m doing this via a ternery and it works fine.

<img dmx-bind:src="(connMyProfile.data.queryCrewProfile.crewProfilePhoto == null ? '/images/profile/avatar-silhouette.jpg' : '/images/profile/'+connMyProfile.data.queryCrewProfile.crewProfilePhoto)" class="img-fluid mb-4 profile-photo" height="auto">

However, the check in the database takes a split second before returning the value of the avatar (a filename in the database) so it’s showing the silhouette for that brief moment before replacing it with the avatar.

I’ve tried switching the ternery around but it’s not making any difference. It seems to be the brief lag with the data lookup.

So, can I put in a 300ms delay in showing the image? That would avoid one showing briefly and then switching to something else every time the page loads.