Angular 4+中如何动态为多个img标签设置图片源？

Great question! Let's clean up this redundant code and make it scalable—even if you need more than 3 image slots later, this approach will hold up perfectly.

Step 1: Update Component State to Use an Array #

Instead of three separate variables, use a single array to track all image URLs. We'll also add a variable to track which image slot the user wants to update, plus centralize our default image URL for easier maintenance.

import { Component } from '@angular/core';

@Component({
  // Keep your existing component metadata here
})
export class YourComponent {
  // Initialize array with 3 empty slots (one for each image position)
  images: string[] = new Array(3);
  // Store the index of the image slot we're about to modify
  selectedImageIndex: number = 0;
  // Extract default image URL to avoid repeating it everywhere
  readonly DEFAULT_IMAGE_URL = 'http://localhost:3000/assets/images/ic_crop_original_black_48dp_2x.png';

  // Updated setImage method to target the selected image slot
  setImage(url: string) {
    // Guard clause to make sure we're targeting a valid index
    if (this.selectedImageIndex >= 0 && this.selectedImageIndex < this.images.length) {
      this.images[this.selectedImageIndex] = url;
    }
  }

  // Reusable handler for image load failures
  handleImageError(event: Event) {
    const imgElement = event.target as HTMLImageElement;
    imgElement.src = this.DEFAULT_IMAGE_URL;
  }

  // TrackBy function to optimize ngFor performance (prevents unnecessary re-renders)
  trackByIndex(index: number): number {
    return index;
  }
}

Step 2: Refactor Template to Use *ngFor #

Replace the three duplicate <img> tags with a single loop that renders all image slots dynamically. We'll add a click handler to store which slot the user wants to update when they open the modal.

<!-- Dynamic image slots - no more duplicate code! -->
<ng-container *ngFor="let imgUrl of images; let i = index; trackBy: trackByIndex">
  <img 
    style="width: 100px" 
    [src]="imgUrl" 
    (error)="handleImageError($event)"
    href="#modal-sections" 
    uk-toggle
    (click)="selectedImageIndex = i" <!-- Save the index of the clicked image slot -->
  >
</ng-container>

<!-- Your existing image selection modal (no major changes needed) -->
<div id="modal-sections" uk-modal>
  <div class="uk-modal-dialog">
    <img src="/assets/images/cat1.svg" (click)="setImage('/assets/images/cat1.svg')">
    <img src="/assets/images/cat2.svg" (click)="setImage('/assets/images/cat2.svg')">
    <img src="/assets/images/cat3.svg" (click)="setImage('/assets/images/cat3.svg')">
    <!-- Add more images here as needed -->
  </div>
</div>

Key Improvements #

• Eliminated Redundancy: One template block handles all image slots—no more copying and pasting the same HTML for each image.
• Scalability: To add more image slots, just change new Array(3) to new Array(n)—no need to add extra variables or HTML.
• Maintainability: Default image URL and error logic are centralized, so you only need to update them in one place if they change.
• Better Performance: The trackByIndex function prevents Angular from re-rendering all image elements when the array updates.

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