Question

我希望显示来自数据库的图像，但它不显示。即使我使用控制台检查，也没有任何错误，但如果我显示图像，请选择其作品。

如何显示图像？

CompletableFuture

Answer 1

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

如果你想在你选择的选项中显示图像，你需要在javascript中创建一个伪造的选择，在真正的选择上进行更改。

有很多jquery插件可以做到这一点。

最着名的插件是select2，你可以在https://select2.org/找到它，并在这里找到一个例子https://select2.org/dropdown

Answer 2

希望你能

您可以在选项中使用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 3

您可以使用带有background属性

的样式属性添加图像以选择选项

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

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

Answer 4

您可以在下拉选项中添加图片，它仅适用于 Firefox ：

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

否则，您可以将JS小部件库用作：

选择2：Exemple: https://jsfiddle.net/fr0z3nfyr/uxa6h1jy/

Bootstrap-select：https://silviomoreto.github.io/bootstrap-select/examples/#icons

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

4 个答案: