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

Question

我正在尝试创建一个选择按钮，该按钮显示图像及其标题，供用户选择。

模板

<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