代码之家 › 专栏 › 技术社区 › Geeta

选定选项上未显示图像

html-select material-design angular html

Geeta · 技术社区 · 7 年前

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

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

1 回复 | 直到 7 年前

Jassi Walia 6 年前

您好,在span中,无法在内部添加标记,因此您应该使用所选like的背景图像

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