MVC5项目中使用JavaScript加载图片失败问题求助

核心问题 #

你的代码无法正常运行的主要原因是浏览器端JavaScript无法解析ASP.NET MVC的~路径符号。~是服务器端专属的路径占位符，只有ASP.NET服务器处理Razor视图时才会将其替换为网站根目录路径，客户端JS直接使用会导致路径错误，图片无法加载。

另外还有一个细节问题：maxWidth和maxHeight属于CSS样式属性，不能直接通过元素属性赋值，需要通过style对象设置，且必须加上单位（如px），否则浏览器无法识别。

修正后的代码方案 #

方案一：利用Razor生成正确路径（推荐）

在Razor视图中，通过@Url.Content()生成客户端可识别的绝对路径，再传递给JavaScript使用：

<img id="id1" class="img-responsive"/>

<script>
// 由服务器端生成正确的图片路径
var imagePath = '@Url.Content("~/Content/images/FILMSTRIP.png")';
var img = new Image();
img.src = imagePath;
img.onload = function() {
    var imageElement = document.getElementById("id1");
    imageElement.src = img.src;
    // 正确设置CSS样式属性
    imageElement.style.maxWidth = "1592px";
    imageElement.style.maxHeight = "516px";
    imageElement.alt = "Activities";
    imageElement.style.marginLeft = "auto";
    imageElement.style.marginRight = "auto";
};
</script>

方案二：直接使用根相对路径

如果网站根目录路径固定，也可以直接使用以/开头的根相对路径（无需依赖服务器端解析）：

<img id="id1" class="img-responsive"/>

<script>
var img = new Image();
// /开头表示网站根目录，直接指向资源路径
img.src = "/Content/images/FILMSTRIP.png";
img.onload = function() {
    var imageElement = document.getElementById("id1");
    imageElement.src = img.src;
    imageElement.style.maxWidth = "1592px";
    imageElement.style.maxHeight = "516px";
    imageElement.alt = "Activities";
    imageElement.style.marginLeft = "auto";
    imageElement.style.marginRight = "auto";
};
</script>

额外排查技巧 #

可以通过浏览器开发者工具（F12）的网络面板查看图片请求的实际路径，确认是否指向服务器上的正确资源，这是排查图片加载类问题的高效方法。

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