ASP.NET Core上传图片后设置Image元素src属性不生效的路径问题

问题根因 #

• 波浪号(~)无法在客户端JS中识别
  ~是ASP.NET Core Razor的服务端路径占位符，仅在服务端渲染.cshtml时会被解析为网站根目录路径，运行在浏览器端的JavaScript不会处理该符号，会直接将其作为路径的一部分发起请求，导致路径匹配错误。
• 元素ID拼写不匹配
  你的img元素ID声明为imgPerons，但JS代码中获取元素时用的是imgPerson，拼写不一致会导致JS无法找到目标DOM元素，赋值操作自然无法生效。

修复方案 #

1. 修正图片路径：直接使用根相对路径即可，ASP.NET Core的静态文件根目录默认是wwwroot，/开头的路径会直接映射到wwwroot目录下：

function onSuccess(e) {
    var files = e.files[0];
    if (e.operation == "upload") {
        // 去掉~，直接用/开头的根相对路径
        document.getElementById("imgPerson").src = "/images/person_photos/image.jpeg";
    }
}

2. 统一ID拼写：要么将img元素的ID修改为imgPerson，要么将JS中getElementById的参数改为imgPerons，保证两端拼写完全一致。

补充说明 #

如果你的项目部署在二级虚拟目录下，需要动态获取根路径的话，可以在.cshtml中提前声明服务端解析的根路径变量供JS调用：

<!-- 写在.cshtml文件中，会在服务端渲染为实际的根路径 -->
<script>
const siteRoot = '@Url.Content("~/")';
</script>

后续JS中拼接路径即可：

document.getElementById("imgPerson").src = siteRoot + "images/person_photos/image.jpeg";

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