如何使用HTML与Angular插入本地电脑中的图片

1. 插入项目内的本地图片（已放在assets文件夹） #

• 先补全你给出的不完整img标签：

<img src="assets/images/img.png" alt="图片描述文本">

• 确保Angular配置正确：打开angular.json，检查assets数组是否包含src/assets，这样项目构建时会自动将assets文件夹的内容复制到输出目录，保证路径有效：

"assets": [
  "src/favicon.ico",
  "src/assets"
]

• 路径规则：assets是项目的根路径起点，只要图片实际存放在src/assets/images/img.png，直接用assets/images/img.png作为src即可，无需添加斜杠或绝对路径。

2. 插入用户本地电脑的图片（非项目内文件，比如用户上传） #

如果要让用户选择自己电脑里的图片并实现本地预览，可通过文件上传控件结合Angular事件处理实现：

• 在组件模板中添加文件输入和预览图片：

<input type="file" accept="image/*" (change)="onImageSelected($event)">
<img [src]="previewImageUrl" *ngIf="previewImageUrl" alt="预览图片">

• 在组件类中编写事件处理逻辑：

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

@Component({
  selector: 'app-image-preview',
  templateUrl: './image-preview.component.html',
  styleUrls: ['./image-preview.component.css']
})
export class ImagePreviewComponent {
  previewImageUrl: string | null = null;

  onImageSelected(event: Event): void {
    const input = event.target as HTMLInputElement;
    if (input.files && input.files[0]) {
      const file = input.files[0];
      // 生成本地预览链接
      this.previewImageUrl = URL.createObjectURL(file);
      // 组件销毁时释放临时链接内存
      input.onload = () => {
        URL.revokeObjectURL(this.previewImageUrl!);
      };
    }
  }
}

• 说明：这种方式通过浏览器的URL.createObjectURL将本地文件转为临时预览链接，仅做本地展示，不会上传到服务器；若需上传，还需结合HTTP请求发送文件数据。

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