将 img 标签添加到 div - 而不是如何使用 append()答案

【问题标题】：Adding img tag to div - and not it's not how to use append()将 img 标签添加到 div - 而不是如何使用 append()
【发布时间】：2013-03-28 01:45:45
【问题描述】：

我正确添加了带有以下代码的 img 标签，但它仅在网页上显示为一个带有 X 的小框。为了测试，我在网页中添加了同样的 img 标签。这显示很好。我在开发者工具（PF12）中查看了两个img标签，页面上的标签是一样的。我认为正在发生的事情是，在 jQuery 中，我在安排了所有对内容的 http 请求之后加载图像标签，所以我得到了标签，但是在浏览器的处理中为时已晚，无法获取请求的源文件和加载。我正在尝试在页面的第一次显示时加载不同的图像（取决于隐藏输入字段的内容 - 访问它并根据我插入的一些警报确定哪个图像工作正常）。

这是插入图像的代码（在我解决这个问题时删除了决定）：

$(document).ready (function() {
            $('<img class="rcpt" src="~/Images/MountainCrs_Incline.png" alt="" />').appendTo('div#Logo');
});

这是插入的 img 标签，它只显示“未解析的引用”框（直接从生成的 html 复制）：

<div id="Logo"><img class="rcpt" alt="" src="~/Images/ChampCrs_Incline.png"></div>

这是我插入到原生 html 中的 img 标签，以验证 img 标签的格式是否正确（这个显示正常）：

<h3>&nbsp;</h3>
<img class="rcpt" alt="" src="/Images/ChampCrs_Incline.png">
<h3>&nbsp;</h3>

如果有人能告诉我发生了什么以及如何解决它，我将不胜感激。我正在使用 Visual Studio 11 和 IE10 进行测试。谢谢...

【问题讨论】：

我在查看这个问题时找到了自己的答案。我刚刚注意到浏览器从第二个 img 标签中删除了“~”（它出现在页面的源代码中）。通过从我要插入的 img 标签的 src 属性中删除“~”，我可以显示它。我找到了答案，但我有点不知所措为什么会这样......如果有人愿意添加一些 cmets，我们将不胜感激......

标签： jquery html

【解决方案1】：

这不是一个有效的客户端网址

~/Images/MountainCrs_Incline.png

这在服务器端解析为有效的 url，但在客户端没有任何意义。尝试将其替换为

/Images/MountainCrs_Incline.png

【讨论】：

【解决方案2】：

您在使用 jQuery 插入的 img 标记的 src 属性中有一个波浪号 (~)，但在“本机 html”标记中没有。波浪号是有效的 URL 字符。我假设您使用的是 .NET。在 URL 中使用波浪号的方式仅适用于服务器端。

【讨论】：

【解决方案3】：

用ResolveClientUrl试试这个：

var url = '<%= ResolveClientUrl("~/Images/MountainCrs_Incline.png") %>';
$('<img class="rcpt" src="' + url + '" alt="" />').appendTo('div#Logo');

【讨论】：