我想动态地在选择选项中显示图像，但不起作用

Question

我想显示来自数据库的图像，但它不显示。即使我使用控制台检查了，也没有错误，但是如果我从选择中显示图像。

如何显示图像？

 <select data-show-subtext="true" class=" selectpicker bs-select form- 
   control" data-live-search="true" data-size="8" name="drawing">
   <option value=""></option>
   <?php  foreach($get_drawing as $row):   ?>   
   <option data-subtext="" value="<?php echo $row->drawing_id; ?>" >
       <?php echo $row->drawing_name;?> 
       <img width="22%" height="10%" class=""  src="<?php 
           echo base_url('drawing/fabricator/admin_3/'.$row->image); ?>">
       </img>
   </option>   
   <?php endforeach; ?>
 </select>

Answer 1

希望这会

您可以在选项中使用data-subtext

您的选择应该是这样的：

<select data-show-subtext="true" class=" selectpicker bs-select form- control" data-live-search="true" data-size="8" name="drawing">
    <option value=""></option>
    <?php  foreach($get_drawing as $row):   ?>   
    <option data-subtext="<img width='22%' height='10%''  src='<?=base_url("drawing/fabricator/admin_3/".$row->image);?>'>"  
    value="<?php echo $row->drawing_id; ?>"  >
     <?php echo $row->drawing_name;?> 
    </option>

  <?php endforeach; ?>
 </select> 

结果看起来像：

<select class="selectpicker" data-size="5" tabindex="-98">
  <option value="1" data-subtext="<img src='http://localhost/drawing/fabricator/admin_3/logo-dark.png'>">Ketchup</option>
</select>

有关更多信息：https：//silviomoreto.github.io/bootstrap-select/examples/#styling

Answer 2

html默认选择select仅允许在选项中显示文本。

如果您想在选择选项中显示图像，则需要在JavaScript中创建一个伪造的选择，以在更改上进行真实的选择。

有很多jQuery插件。

最著名的插件是select2，您可以在此处找到https://select2.org/和此处的一个示例https://select2.org/dropdown

Answer 3

您可以在下拉选项中添加图像，它仅在 firefox 上工作：

<select>
  <option style="background-image:url(apple.png);">Apple</option>
  <option style="background-image:url(orange.png);">Orange</option>
</select>

其他

select2：示例：https：//jsfiddle.net/fr0z3nfyr/uxa6h1jy/

bootstrap-select：https：//silviomoreto.github.io/bootstrap-select/examples/#icons/#/p>

Answer 4

您可以使用 background属性

使用样式属性添加图像为选择选项

background: url('drawing/fabricator/admin_3/' + image ) no-repeat 100% 100%;'

有关更多信息，请在此处查看我的答案
https://stackoverflow.com/a/49469243/3134112