Angular下拉菜单Option图片无法显示（元素检查可见）

原生HTML的<select>元素的<option>标签不支持内嵌<img>元素——尽管浏览器会解析出img标签并渲染到DOM中，但不会实际显示图片，这是浏览器的原生限制，和Angular框架无关。

方案1：用CSS背景图实现 #

通过给<option>设置背景图替代内嵌img标签，同时调整文字内边距避免重叠：

修改后的HTML代码 #

<div class="dropdown" *ngFor="let in of counter(inputCount); let ind = index">
    <select placeholder="Select" (change)="filterValue($event)">
        <option *ngFor="let filter of filters; let indexOfElement= index" 
                [value]="indexOfElement"
                [style.backgroundImage]="'url(' + filter?.icon + ')'"
                class="option-with-icon">
            {{filter?.name}}
        </option>
    </select>
</div>

对应的CSS样式 #

.option-with-icon {
    padding-left: 30px; /* 根据图片宽度调整，给背景图预留空间 */
    background-size: 20px 20px; /* 自定义图片尺寸 */
    background-repeat: no-repeat;
    background-position: 5px center; /* 控制图片位置 */
}

方案2：使用自定义下拉组件 #

如果需要更灵活的样式控制（比如图片大小、位置自由调整），建议放弃原生<select>，改用Angular生态的UI组件库或自定义下拉菜单：

示例：Angular Material MatSelect #

首先确保已安装Angular Material：

ng add @angular/material

组件代码（.ts）

import { Component } from '@angular/core';
import { MatSelectModule } from '@angular/material/select';
import { MatOptionModule } from '@angular/material/core';

@Component({
  selector: 'app-filter-dropdown',
  templateUrl: './filter-dropdown.component.html',
  standalone: true,
  imports: [MatSelectModule, MatOptionModule]
})
export class FilterDropdownComponent {
  filters = [
    {
      name: 'Status',
      icon: "../../../../assets/images/filters/screen.jpg",
      values: [
        { status_kuid: '100', status_label: 'Todo' },
        { status_kuid: '101', status_label: 'In Progress' },
        { status_kuid: '102', status_label: 'Done' },
      ],
      isApplied: false,
      usedByField_index: '',
    }
  ];
  inputCount = 1;
  
  counter(n: number): number[] {
    return Array(n);
  }

  filterValue(event: any): void {
    // 你的逻辑处理代码
  }
}

模板代码（.html）

<div class="dropdown" *ngFor="let in of counter(inputCount); let ind = index">
    <mat-select placeholder="Select" (selectionChange)="filterValue($event)">
        <mat-option *ngFor="let filter of filters; let indexOfElement= index" [value]="indexOfElement">
            <img [src]="filter?.icon" style="width:20px; height:20px; margin-right:8px;">
            {{filter?.name}}
        </mat-option>
    </mat-select>
</div>

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