Why does this jQuery dont work?

Hello I have the Problem that if I use this:
$('.tab-button-icon[aria-label="profile"]').css({"background-image": "url('myserver.com/image')"});
works but this if i want to change the url programmatically and set it new with a variable doesnt work.
Im sure that this.profilepiclink has the right url.
$('.tab-button-icon[aria-label="profile"]').css({"background-image": "url('" + this.profilepiclink + "')"});

Why aren’t you just using Angular property bindings here?

Because then i would have to bypass security trust issues so i have to trigger a function like [src]=“bypassSecurityTrust()” and the problem is i cant trigger source functions in ion-tabs :slight_smile: because the tabs doesnt contain [src]

I don’t know what the problem with functions is, but you don’t have to call functions from the template to use the DomSanitizer. You can store properties of type SafeUrl in the controller and reference them directly.

I tried it already with Dom and SafeUrl didnt work. and i got no error output only a blank image but with console log i swear i got the right image link. so for me the faster solution is now to use jquery sadly. And i have to be fast in this project not efficiently sadly

stackoverflow thread:

If you don’t get any better answers, one approach could be to ditch tabs in favor of an <ion-segment> and handle the tab-like navigation by yourself. I verified that whereas [style.background] doesn’t work on <ion-tab>, it does on <ion-segment-button>.