javascript - 附加到 div 时 gif 图像的相对路径会中断吗？

Question

问题背景:

我的 View 上有一个表单，当用户提交此表单时，它将显示加载“旋转器”gif。

问题:

如果我在其持有的 div 中包含微调器 img 元素，那么微调器就会被渲染，但显然它会一直显示出来，这是我不想要的:

如果我在提交表单时使用 jQuery 将 img 元素附加到微调器，则相对路径无法呈现微调器:

代码:

这是旋转器 img 元素将附加到的 div 帽子。

<div id="loadSpinner" class="text-center">
</div>

jQuery 用于将 img elemtn 与旋转器 gif 的实际路径一起附加。

    function showSpinner() {

    var spinner = '<img src="~/Images/LoadingSpinner.gif">';

    $(spinner).appendTo('#loadSpinner');

}

任何帮助确定为什么这不会呈现的帮助将不胜感激。

Answer 1

因为您正在混合无法在 dom 中运行的 razor 代码。

~ 不是有效 http URL 路径的一部分。使用正确的图像路径

假设 Images 目录位于网站的根目录中，请尝试删除 ~

var spinner = '<img src="/Images/LoadingSpinner.gif">';