图像未显示在所选选项上

Question

select 选项中有图片和文字。但是当我 select 任何选项时，图像没有显示在 selected 内容中。

 <mat-select>
   <mat-option [value]="1"><img src="assets/image/survey/short-text.png">Short Answer</mat-option>
   <mat-option [value]="2"><img src="assets/image/survey/paragraph.png">Paragraph</mat-tion>
   <mat-option [value]="3"><img src="assets/image/survey/redio.png" >Multiple Choice </mat-option>  
   <mat-option [value]="4"> <img src="assets/image/survey/chechbox.png">Checkbox</mat-option> 
   <mat-option [value]="5"><img src="assets/image/survey/date.png" >Date</mat-option>
   <mat-option [value]="6"><img src="assets/image/survey/linear-scale.png" >Linear cale</mat-option>
 </mat-select>

Answer 1

您好，在 span 中无法在内部添加标签，因此您应该使用所选类似的背景图片

.selectedImg {
    white-space: nowrap;
    display: inline;
}

.option1 {
    background: url("assets/image/survey/short-text.png") center / contain no-repeat;
}

.option2 {
    background: url("assets/image/survey/paragraph.png") center / contain no-repeat;
}

.option3 {
    background: url("assets/image/survey/redio.png") center / contain no-repeat;
}

.option4 {
    background: url("assets/image/survey/chechbox.png") center / contain no-repeat;
}

.option5 {
    background: url("assets/image/survey/date.png") center / contain no-repeat;
}

.option6 {
    background: url("assets/image/survey/linear-scale.png") center / contain no-repeat;
}

<mat-select class="selectedImg" [(value)]="selected" [ngClass]="selected">
        <mat-option value="option1">
           <img src="assets/image/survey/short-text.png">Short Answer
        </mat-option>
        <mat-option value="option2">
           <img src="assets/image/survey/paragraph.png">Paragraph
        </mat-option>
        <mat-option value="option3">
           <img src="assets/image/survey/redio.png">Multiple Choice 
        </mat-option>
        <mat-option value="option4">
           <img src="assets/image/survey/chechbox.png">Checkbox
        </mat-option>
        <mat-option value="option5">
           <img src="assets/image/survey/date.png">Date
        </mat-option>
        <mat-option value="option6">
           <img src="assets/image/survey/linear-scale.png">Linear cale
        </mat-option>
    </mat-select>

图像未显示在所选选项上

Image not showing on selected option

html

html-select

material-design

angular