ASP-DropDownList 代码隐藏图片

Question

我只想让我的 DropDownList 与众不同。 :(

我可以只写名字，但这不会那么有趣。所以我尝试添加图像，如下所示：

// Somewhere in the code...
ListItem item = new ListItem();
item.Value = // something
item.Text = "<img src=\"" + <AnImagePathIGetFromTheDatabase> + "\">";
<MyDropDownlist>.Items.Add(item);

然而邪恶的东西会自动转义列表中的文本，就像这样：

<img src="https://41.media.tumblr.com/bcb96f4a4c46a1001118ee216d7abacf/tumblr_mgfhbngsDl1r58qimo1_500.png">

所以我得到的是文本而不是图像。我该如何克服这个问题？

编辑：使用 Lajos 的解决方案，我遇到了检查选择元素的情况，我得到以下信息：

<img src="http://i.somethingawful.com/u/robtg/Fiesta/f05.jpg" alt="monster" height="42" width="42">

这正是我要找的。可悲的是，在页面源代码中，我得到以下内容：

<option value="MeaninglessImp" class="imageconverter">http://i.somethingawful.com/u/robtg/Fiesta/f05.jpg</option>

列表本身显示 2 个空单元格。检查员说图片已经缩小到0x0.

Fiddle: here.

为什么会这样？

Answer 1

您可以将文本设置为包含来源并且在页面加载之前不显示它们。您可以实现一个 Javascript 库，用列表中的图像替换 src 文本。那应该可以解决问题。

// Somewhere in the code...
ListItem item = new ListItem();
item.Value = // something
item.Text = <AnImagePathIGetFromTheDatabase>;
listItem.Attributes.Add("class", "imageconverter");
<MyDropDownlist>.Items.Add(item);

而在 Javascript 中你需要这样的东西：

$(function() {
    $(".imageconverter").each(function() {
        $(this).html('<img src="' + $(this).text() + '">');
    });
});

ASP-DropDownList 代码隐藏图片

ASP-DropDownList CodeBehind images

html

asp.net

image

drop-down-menu