Img src ternary operator not displaying image-CodePudding

I'm trying to use a ternary operator in angular for two image sources based on a condition. I'm getting no errors but the images are not displaying.

<img
          
          width="100"
          height="100"
          alt="profile picture"
          [attr.src]="user.user_profile_picture !== null ? 'http://localhost:8000/storage/profile_images/'  
            user.user_profile_picture.image : 'http://localhost:8000/storage/profile-picture.png'"
          data-holder-rendered="true"
        />
      </div>

Am I making a basic mistake here?

CodePudding user response：

Try just [src], not [attr.src].

Any way, due you don't get the image from your angular proyect (from src/asstes or similar), I'm not completly sure if you have to "sanitize" this url's before.

Try and comment.