Utilize Angular to dynamically bind the image source from a TypeScript function

Question

Utilize Angular to dynamically bind the image source from a TypeScript function

Is there a way to dynamically bind the src attribute of an img tag in Angular by calling a function from Typescript? Here's the HTML code snippet:

<button (click)="createBoard()"> Create Board</button>
<table>
 <tr *ngFor="let i of board; let a = index">
  <td *ngFor="let j of i; let b = index">
    <div class="bDefault">
      <img src="getImage(a,b)"  
      (click)="changeImg(a,b, $event)">
    </div>
  </td>
 </tr>
</table>

And this is the corresponding Typescript code:

size : number = 5;
board : number[][] = [];

createBoard(){
 this.board = new Array(this.size);
 for(let i=0; i<this.size; i++){
  this.board[i] = new Array(this.size);
  for(let j=0; j<this.size; j++){
    this.board[i][j] = 0;
  }
 }
}

getImage(i:any, j:any){
  if(this.board[i][j] == 0){
    return "../../../assets/oth/default.jpg";
  } else if(this.board[i][j] == 1){
    return "../../../assets/oth/bidak_hitam.jpg";
  } else {
    return "../../../assets/oth/bidak_putih.jpg";
  }
}

changeImg(i:any, j:any, event:Event){
  if(this.board[i][j] == 2){
    this.board[i][j]  = 0;
  } else {
    this.board[i][j] ++;
  }
}

The issue reported here is that the images are not being loaded. Is there a workaround to fetch image sources using a function in Angular or Typescript?

angular typescript

Answer 1

Answer №1

Instead of using getImage(a,b) as a static string in your code,

<img src="getImage(a,b)" (click)="changeImg(a,b, $event)">

You can dynamically interpolate it by using property binding:

<img [src]="getImage(a, b)" (click)="changeImg(a, b, $event)">

This allows the 'src' attribute to get dynamic data from the getImage function.

Answer 2

Instead of using getImage(a,b) as a static string in your code,

<img src="getImage(a,b)" (click)="changeImg(a,b, $event)">

You can dynamically interpolate it by using property binding:

<img [src]="getImage(a, b)" (click)="changeImg(a, b, $event)">

This allows the 'src' attribute to get dynamic data from the getImage function.

Answer 3

Answer №2

Avoid using a function directly in the .html file. Instead, consider creating an array of objects with values and paths as shown below:

this.board = new Array(this.size);
 for(let i=0; i<this.size; i++){
  this.board[i] = new Array(this.size);
  for(let j=0; j<this.size; j++){
    this.board[i][j] = {value:0,path:'assets/oth/default.jpg'};
  }
 }

When changing images within your function, follow this pattern:

changeImg(i:any, j:any, event:Event){
  if(this.board[i][j].value == 2){
    this.board[i][j]={value:0
                      path='assets/oth/default.jpg'}
  } else {
    if (this.board[i][j].value==0)
       this.board[i][j]={value:1
                         path='assets/oth/bidak_hitam.jpg'}
    else
       this.board[i][j]={value:2
                         path='assets/oth/bidak_putih.jpg'}
  }
}

Then, utilize the following code snippet to display the images accordingly:

<img src="board[a][b].path"  
      (click)="changeImg(a,b, $event)">

By implementing this approach, you can avoid unnecessary code execution by Angular.

Answer 4

Avoid using a function directly in the .html file. Instead, consider creating an array of objects with values and paths as shown below:

this.board = new Array(this.size);
 for(let i=0; i<this.size; i++){
  this.board[i] = new Array(this.size);
  for(let j=0; j<this.size; j++){
    this.board[i][j] = {value:0,path:'assets/oth/default.jpg'};
  }
 }

When changing images within your function, follow this pattern:

changeImg(i:any, j:any, event:Event){
  if(this.board[i][j].value == 2){
    this.board[i][j]={value:0
                      path='assets/oth/default.jpg'}
  } else {
    if (this.board[i][j].value==0)
       this.board[i][j]={value:1
                         path='assets/oth/bidak_hitam.jpg'}
    else
       this.board[i][j]={value:2
                         path='assets/oth/bidak_putih.jpg'}
  }
}

Then, utilize the following code snippet to display the images accordingly:

<img src="board[a][b].path"  
      (click)="changeImg(a,b, $event)">

By implementing this approach, you can avoid unnecessary code execution by Angular.

Utilize Angular to dynamically bind the image source from a TypeScript function

Answer №1

Answer №2

Similar questions

Ways to eliminate Typescript assert during the execution of npm run build?

The input does not provide a value for the variable [value]

When Ionic Angular app's IonContent scroll element returns an incorrect scrollTop value after navigation completes, what might be the reason behind this unexpected behavior?

Django Angular 403 Error: CSRF-cookie not accepted. Reason: CSRF token is missing or incorrect

Unable to successfully import Node, JS, or Electron library into Angular Typescript module despite numerous attempts

A guide on simulating HTTP methods in Jest when dealing with private methods

Remove the icon that indicates severity in PrimeNG

The separator falls short of spanning the entire width of the page

Setting a default value dynamically in a `select` control can be done by using JavaScript to

How to pass an object between two Angular 2 components without a direct connection

A different approach to routing in Next.js with getServerSideProps

Is it feasible for a React-based shell to host or load an Angular component using Module Federation in Webpack 5?

Strategies for managing unpredictable time series data visualization

Is there a way to incorporate my getter into a computed property?

How to conditionally make a property optional in Typescript depending on the value of another property

Issue with Angualr2: Trying to assign a value to a property of #<AbstractControl> that is read-only

Next.js TypeScript throws an error stating that the object 'window' is not defined

"Upon the addition of a child, no response is being given

Troubleshooting vague errors with uploading large files in Golang's net/http protocol

Enhance TypeScript class declarations with additional properties