CODEWITHSUNDEEP
htmlangular
Nikson
Nikson

Reputation: 940

Image path inside ref tag is not loading

I am working in an Angular project ,In this I am binding the image path from API. I receive the path from API and trying to display the images in a HTML page .In my case image path inside the src tag is loading well but image path in the ref path is not loading .

Image 1

<div class="row">
      <img id="sm001" (mouseenter)="mouseEnter($event)"  src="{{smallImages['0']['small_Images']}}" alt="img1" class="img-thumbnail" ref="bigImages['0']['big_Images']">
      <img id="sm005" (mouseenter)="mouseEnter($event)"  src="{{smallImages['1']['small_Images']}}" alt="img2" class="img-thumbnail" ref="bigImages['1']['big_Images']">
      <img id="sm002" (mouseenter)="mouseEnter($event)"  src="{{smallImages['2']['small_Images']}}" alt="img3" class="img-thumbnail" ref="bigImages['2']['big_Images']">
      <img id="sm003" (mouseenter)="mouseEnter($event)"  src="{{smallImages['3']['small_Images']}}" alt="img4" class="img-thumbnail" ref="bigImages['3']['big_Images']">
      <img id="sm004" (mouseenter)="mouseEnter($event)"  src="{{smallImages['4']['small_Images']}}" alt="img5" class="img-thumbnail" ref="bigImages['4']['big_Images']">
  </div>

As in the above code the src tag images are loading but the ref tag images are not loading.

When I put ref="{{bigImages['4']['big_Images']}}" like this the HTML page is not get loaded.

Actually what I am trying is when I hover on the small images (src images ) it will display the big images (ref images). Please guide me to solve this .

Upvotes: 1

Views: 168

Answers (2)

Vivek Doshi
Vivek Doshi

Reputation: 58593

in ref you forgot to add {{ }} :

change

ref="bigImages['0']['big_Images']"

to :

ref="{{bigImages['0']['big_Images']}}"
// OR
[attr.ref]="bigImages['0']['big_Images']" // I would suggest this

This one will might throw error as it not known property of img tag

ref="{{bigImages['0']['big_Images']}}"

So if you want any custom tag to any element , you should do it like

[attr.ref]="bigImages['0']['big_Images']"

Upvotes: 1

Praveen Kumar
Praveen Kumar

Reputation: 543

Try

[attr.ref]="bigImages['0']['big_Images']"

Upvotes: 0

Related Questions