我如何使用在 JavaScript 中创建的变量来设置 HTML 中图像的“src”属性？

Question

我正在尝试制作一个非常简单的 web 页面，该页面根据用户计算机上的时间全天旋转 3 个预先存在的图像。 我已经设法设置了 if 语句，它可以检查一天中的时间并根据一天中的什么时间通过 if 语句执行操作（此功能按预期工作），但是我正在努力做我想做的事情在这个问题的标题中提到了..

下面是我对图像的 HTML 代码，它位于脚本标签上方，因此在 javascript 执行之前已经创建了图像。

<img id="dayImage" src="" alt="Unable to load image" />

此后，我拥有执行此特定 function 的内部 javascript：

<script>

            var image = document.getElementById('dayImage');

            var myDate = new Date();
            var hrs = myDate.getHours();

            if (hrs < 12)
                image.setAttribute("src", "~/Images/Morning.PNG");

            else if (hrs >= 12 && hrs <= 17)
                image.setAttribute("src", "~/Images/Noon.PNG");

            else if (hrs >= 17 && hrs <= 24)
                image.setAttribute("src", "~/Images/Evening.PNG");

        </script>

如果有任何帮助，我正在 ASP.NET MVC 项目文件中执行此操作。 我不确定我是否在这里遗漏了一些非常明显的东西......任何帮助将不胜感激，谢谢:)

Answer 1

将"~/"传递给脚本可能指的是存储视图的相对路径。 使用Url.Content(path)从 web 根目录开始，将给出服务器中文件的绝对 url。

if (hrs < 12)
   image.setAttribute('src', '@Url.Content("~/Images/Morning.PNG")');
else if (hrs >= 12 && hrs <= 17)
   image.setAttribute('src', '@Url.Content("~/Images/Noon.PNG")');
else if (hrs >= 17 && hrs <= 24)
   image.setAttribute('src', '@Url.Content("~/Images/Evening.PNG")');

编辑：更改为单引号