Question

选择选项中有一个图像和文本。但是当我选择任何选项时，图像不会显示在所选内容中。

 <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

你好，在内部无法在里面添加标签，所以你应该使用选择的背景图像，如

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

图像未显示在所选选项上

1 个答案: