CODEWITHSUNDEEP
iosionic-frameworkionic4
Rivero Felipe
Rivero Felipe

Reputation: 187

Ionic 4: The "src" content of an "img" tag is not updating when I change it from the controller in IOS

I am developing an app for Android and IOS.

I have a profile page where the user can change profile pictures. The photo appears in the view and is changed in real time.

My code is like this in the view:

<img alt="logo" style="width:15vh; height:15vh; border-radius: 50%;" src="{{pictureusuariomenu}}">

pictureusuariomenu is a variable found in the controller.

With that variable what I do is, it is the URL of the image that I upload, I update it there. here is the function:

updateStoredImages(name) {
    this.storage.get(STORAGE_KEY).then(images => {
        let arr = JSON.parse(images);
        if (!arr) {
            let newImages = [name];
            this.storage.set(STORAGE_KEY, JSON.stringify(newImages));
        } else {
            arr.push(name);
            this.storage.set(STORAGE_KEY, JSON.stringify(arr));
        }

        let filePath = this.file.dataDirectory + name;
        let resPath = this.pathForImage(filePath);
       // alert(resPath);
        this.urlImage=resPath;


        let newEntry = {
            name: name,
            path: resPath,
            filePath: filePath
        };
        this.images=[]; //borrar las imagenes anteriores (no crear la lista de imagenes)
        this.images = [newEntry, ...this.images];
        this.urlImage = this.images[0].path;
        this.colocarImagenEnProfile(this.urlImage);     
        this.ref.detectChanges(); // trigger change detection cycle
    });
}

In this line:

this.colocarImagenEnProfile(this.urlImage);

What I do is:

colocarImagenEnProfile(newFileName){
    this.pictureusuariomenu=newFileName;
}

Now in android is working fine this way of updating the profile image in view:

Before:

enter image description here

After:

enter image description here

But in IOS this isn't working. The view is not updated at all

Before:

enter image description here

After:

enter image description here

Nothing appears, just a few letters. But the view doesn't update in IOS.

What could it be?

My specifications:

enter image description here

Upvotes: 1

Views: 1240

Answers (1)

Mahdi Zarei
Mahdi Zarei

Reputation: 7436

you forgot to bind it. put it instead of your HTML tag:

<img alt="logo" style="width:15vh; height:15vh; border-radius: 50%;" [src]="pictureusuariomenu">

I don't know why but you have to bind it that way. also, you have to use window.Ionic.WebView.convertFileSrc(); function, if using angular you need to sanitize it. like this:

this.sanitize.bypassSecurityTrustResourceUrl(window.Ionic.WebView.convertFileSrc(path))

Upvotes: 1

Related Questions