图像未显示在所选选项上答案

【问题标题】：Image not showing on selected option图像未显示在所选选项上
【发布时间】：2018-03-18 17:12:56
【问题描述】：

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

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

【问题讨论】：

你能解释一下你的问题是什么，只是显示代码没有解释任何东西
问题显然是你的路径。 'assets/image/survey/' 是相对路径。您的应用是否知道要附加哪个后缀才能到达绝对路径？例如'/Users/user/angular/myApp/assets/image/survey/linear-scale.png'
我想将所选内容显示为图像+文本，在下拉选项中它同时显示图像和文本，但在选择选项后仅显示文本
你在使用 angular cli 吗？如果是，并且图像位于正确的 assets/image/survey 文件夹中，请不要忘记在添加这些资产后重新启动 cli
你能试试data-icon="assets/image/survey/paragraph.png"选项的data-icon属性吗

标签： html angular material-design html-select

【解决方案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>

【讨论】：