JavaScript循环设置HTML图片src时返回404错误该如何解决？

问题根因 #

你的404错误和目录额外挂载没有关系，核心是~是ASP.NET Razor视图的服务端专属根路径占位符，只有在服务端渲染的HTML属性中才会被自动解析为站点根路径，浏览器端运行的JavaScript无法识别该符号，会将其当作普通路径字符拼接到当前页面的路径之后，最终生成https://localhost:44320/Home/~/lib/images/Wisielec2.png这种错误的请求地址，导致资源找不到。

解决方法 #

你可以任选以下任意一种方案修复：

方案1：修改JS路径前缀

直接将JS代码中的~/替换为/，从站点根目录寻址：

var images = ['Wisielec1.png', 'Wisielec2.png', 'Wisielec3.png', 'Wisielec4.png', 'Wisielec5.png', 'Wisielec6.png' ];
document.getElementById("pi_" + j).src = "/lib/images/"+ images[j];

如果你的站点部署在域名的子路径下，可以先在Razor视图中提前注入站点根路径给JS调用：
在Razor视图的<head>标签内添加如下代码：

<script>
window.siteRoot = '@Url.Content("~/")';
</script>

再修改JS路径拼接逻辑：

document.getElementById("pi_" + j).src = window.siteRoot + "lib/images/"+ images[j];

方案2：直接在Razor循环中渲染路径

完全避开JS处理路径的逻辑，在服务端渲染阶段就把图片路径填好：

@for(int i = 1; i < 6; i++)
{
<div id="p_@i" style="text-align:right">
    <picture style="text-align:right;visibility:visible">
       <img id="pi_@i" src="~/lib/images/Wisielec@(i+1).png" alt="Wisielec" style="width:100px;margin-left:inherit">
    </picture>
</div>
}

额外检查项 #

如果修改路径后仍有404问题，确认你的Program.cs中已开启静态文件中间件（默认项目模板自带该配置，未手动删除无需额外修改）：

app.UseStaticFiles();

默认静态文件目录为项目根目录下的wwwroot，只要你的lib/images目录放在wwwroot下，就不需要额外做挂载配置。

内容的提问来源于stack exchange，提问作者Vipp90