Angular中如何通过TypeScript函数绑定img的src属性？

问题核心 #

你当前代码里的img标签src直接写了字符串"getImage(a,b)"，浏览器会把这个字符串当成图片路径去请求，自然找不到资源。同时相对路径的写法也容易导致打包后路径错误，这是两个主要问题。

步骤1：修正src的绑定语法 #

用Angular的属性绑定（方括号[]）来执行函数获取路径，替换原来的字符串写法：

<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> 

步骤2：修正资源路径 #

Angular打包后assets文件夹会被放在项目根目录下，不需要用多层相对路径，直接用根路径写法即可避免层级错误：

getImage(i: number, j: number){ // 建议把参数类型从any改为number，更严谨
  switch(this.board[i][j]){
    case 0:
      return "/assets/oth/default.jpg";
    case 1:
      return "/assets/oth/bidak_hitam.jpg";
    default:
      return "/assets/oth/bidak_putih.jpg";
  }
}

可选优化：减少函数频繁调用（提升性能） #

每次Angular触发变更检测时，getImage都会被重复调用，对于大尺寸棋盘可能产生性能损耗。可以直接在数据结构中存储图片路径：

调整TypeScript代码 #

size : number = 5;
board : { value: number, imgUrl: string }[][] = [];

createBoard(){
 this.board = new Array(this.size);
 const getImgUrl = (val: number) => {
  switch(val){
    case 0: return "/assets/oth/default.jpg";
    case 1: return "/assets/oth/bidak_hitam.jpg";
    default: return "/assets/oth/bidak_putih.jpg";
  }
 }
 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, imgUrl: getImgUrl(0) };
  }
 }
}

changeImg(i: number, j: number, event:Event){
  const item = this.board[i][j];
  item.value = item.value === 2 ? 0 : item.value + 1;
  item.imgUrl = this.getImgUrl(item.value);
}

private getImgUrl(val: number): string {
  switch(val){
    case 0: return "/assets/oth/default.jpg";
    case 1: return "/assets/oth/bidak_hitam.jpg";
    default: return "/assets/oth/bidak_putih.jpg";
  }
}

对应HTML修改 #

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

验证要点 #

• 确认assets/oth目录下确实存在default.jpg、bidak_hitam.jpg、bidak_putih.jpg三张图片
• 若浏览器控制台仍报404，检查路径是否与实际文件结构完全匹配

内容的提问来源于stack exchange，提问作者rheza 555