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标记中是相同的。当页面加载时，图像显示正确，但在弹出框中我只看到图像路径不正确时得到的图像占位符。

如果我替换了函数中图像的代码，那么无论我写什么都在popver中正确显示，那么使用HTML填充popver的代码就可以了。当我使用指向在线图像的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" />

在Bootstrap Popover中找不到图像的路径

1 个答案: