在引导弹出窗口中找不到映像的路径

Question

这让我发疯了。我有一个小图像，当用户将光标悬停在图像上时，我想显示一个较大的版本。所以，我有这个：

$("#Portrait").popover({
    html: true,
    container: 'body',
    trigger: 'hover',
    content: function () { return '<img src="~/Images/person.jpg" width="100" />'; }
})
<img src="~/Images/person.jpg" width="50" id="Portrait" class="img-circle img-responsive hidden-xs" />

这并不完全是我希望它工作的方式，但我已经简化了很多，试图让它工作，但它仍然不会。如您所见，图像的页面在jQuery函数和HTML标记中是相同的。当页面加载时，图像显示正确，但在弹出框中，我只看到图像路径不正确时获得的图像占位符。

如果我替换函数中图像的代码，则我编写的任何内容都会正确显示在弹出框中，因此使用 HTML 填充弹出框的代码正常工作。当我将函数中图像的路径替换为在线图像的 URL 时，该图像会在弹出框中正确显示。

问题似乎非常具体地出在函数中图像的路径上。在我的机器上调试和发布到 Web 服务器后，它都无法正常工作。我尝试将图像移动到与页面相同的文件夹中，以便可以简单地person.jpg路径，但这也不起作用。

有什么想法吗？

Answer 1

我仍然不完全明白为什么，但我猜依赖波浪号 （~） 来指定应用程序根是我从 ASP.NET 编码中继承下来的一个坏习惯。无论如何，我通过使用 Url.Content 帮助程序来获取图像的正确路径来解决此问题，如下所示：

$("#Portrait").popover({
    html: true,
    container: 'body',
    trigger: 'hover',
    content: function () {return '<img src="' + "@Url.Content("/Images/person.jpg")" + '" width="100" />'; }
})
<img src="~/Images/person.jpg" width="50" id="Portrait" class="img-circle img-responsive hidden-xs" />