Django选择选项-在模板中显示图像

Question

我正在尝试创建一个select按钮，用于显示带有标题的图像，供用户从中选择。

模板

<select id="fabric-select" name="select-id">
    {% for item in fabric %}
        <option value="{{item.id}}">{{item.fabric_cover.url}}</option>
        <option value="{{item.id}}"><img src="{{item.fabric_cover.url}}" alt="fabric picture">{{item.name}}</option> 
        <option value="{{item.id}}" data-image="{{item.fabric_cover.url}}"></option>
    {% endfor %}
  </select>

尝试了不同的选项，但它们都没有显示图像本身。第一个选项只是显示图像的静态链接。第二个选项显示名称，但没有其他选项，第三个选项显示空字段。

在我看来：

class ProductListView(ListView):
    queryset = Product.objects.all()
    def get_context_data(self, *args, **kwargs):
        context = super(ProductListView, self).get_context_data(*args, **kwargs)
        cart_obj, new_obj = Cart.objects.new_or_get(self.request)
        context['cart'] = cart_obj

        fabric_obj = Fabric.objects.all()
        context['fabric'] = fabric_obj

        return context

模型

class Fabric(models.Model):
    name         = models.CharField(max_length=120)
    fabric_cover = models.ImageField(upload_to='fabric_images', blank=False)

不确定是否不可能直接抓取图片并将其放入选项中，是否使用了模板的错误代码输出图片，或者是否遗漏了一些东西来使其工作。

Answer 1

<option>元素不支持它内部的任何子元素。您需要使用一些javascript库将选项转换为一组列表(<li>)。下面是一个示例https://www.addwebsolution.com/blog/adding-image-select-list-with-cross-browser-compatibility