1

I have a simple application that allows a user to pick a shingle at the beginning. They are then presented with the option to upgrade that shingle. On the upgrade page the shingle image should update as an upgraded shingle is selected.

On the upgrade page they are shown their current shingle in an image. 

<img style="width:15em; height:15em;" 
src="../../assets/shingles/{{upgradeShingle}}.jpg" />

I have a slider with the available upgrades. 

<p-slider class="col-sm-1" [(ngModel)]="upgradeShingle" (onChange)="handleChangeShingle($event)" [min]="val2" [max]="13" [step]="1" orientation="vertical" [style]="{'height':'30em'}"></p-slider>

Here is the onChange event code:

handleChangeShingle(e) {
    this.upgradeShingle = e.value;
    console.log(this.upgradeShingle);
    if (this.upgradeShingle = this.currentShingle.shingleID) {
        this.shingleChanged = false;
    }else{ this.shingleChanged = true; }
}

As you can see, the src tag has an interpolation of the Angular variable called upgradeShingle and the slider has a binding to the same variable. On the page initialization it works great. However, if I move the slider and the onChange event is triggered, it updates the bound variable but the image does not update accordingly. What am I missing?

K3n5
  • 49
  • 11

3 Answers3

1

It should work with any of these syntaxes:

src="../../assets/shingles/{{upgradeShingle}}.jpg"
src="{{ '../../assets/shingles/' + upgradeShingle + '.jpg' }}"
[src]="'../../assets/shingles/' + upgradeShingle + '.jpg'"

See this stackblitz for a demo.

Also, make sure to use a comparison operator in the if statement instead of the assignment operator. In other words, replace = with == or ===:

if (this.upgradeShingle === this.currentShingle.shingleID) {

Or replace the if condition with the following statement:

this.shingleChanged = this.upgradeShingle !== this.currentShingle.shingleID;
ConnorsFan
  • 70,558
  • 13
  • 122
  • 146
  • Thank you for your assistance. The first option basically works the same as my original code. It shows the image, but does not update as the slider is moved. The second option behaves exactly the same as the first. I appreciate your assistance but the issue I am having is the lack of "updating" of the image based off of the slider moving and updating the 'upgradeShingle' variable. – K3n5 Jun 12 '19 at 16:14
  • I think the problem is in `if (this.upgradeShingle = this.currentShingle.shingleID)`. Replace `=` with `==` or `===`. – ConnorsFan Jun 12 '19 at 16:19
  • This fixed the issue!!! Wow, talk about a small thing making all the difference! Thank you very much @ConnorsFan ! – K3n5 Jun 12 '19 at 18:54
0

The browser is not triggered to redownload the image. Here is an answer from SO about forcing redownload. I've applied it (roughly) to your question.

<img src="['../../assets/shingles/' + upgradeShingle + '.jpg' + 'new Date().getTime()']" />

This will append the current timestamp automatically when you are creating the image, and it will make the browser look again for the image instead of retrieving the one in the cache.

Ben Racicot
  • 5,332
  • 12
  • 66
  • 130
0

If string interpolation is not mandatory this may do the job.

<img #imgRef style="width:15em; height:15em;" 
src="some source" />

Slider like you have

<p-slider class="col-sm-1" [(ngModel)]="upgradeShingle"  (onChange)="handleChangeShingle($event)" [min]="val2" [max]="13" [step]="1" orientation="vertical" [style]="{'height':'30em'}"></p-slider>

Make sure you are extracting value from event and assigning

@ViewChild('imgRef') el: ElementRef;

handleChangeShingle(e) {

 let source = e.value || e.target.value //which ever works for you     

 this.el.nativeElement.src = '../../assets/shingles/' + source + '.jpg';

 // you other codes here if any

}
karthik
  • 82
  • 10