ASP.NET MVC Razor视图中同目录图片加载失败的问题求助

你的图片无法加载主要有两个核心原因：

1. 虚拟路径指向错误 #

Razor视图中~/代表应用程序根目录，而非当前视图所在的文件夹。你的图片和视图放在同一目录（通常是Views/[目标控制器名]或Views/Shared），但~/HighRes.jpg会指向根目录下的图片，自然无法找到。

2. Views文件夹的静态文件访问限制 #

ASP.NET MVC默认会阻止直接访问Views文件夹内的静态文件，目的是防止视图源码泄露。即使你写对了相对路径，服务器也会拒绝图片请求。

推荐解决方案：将图片移到标准静态资源目录 #

这是ASP.NET MVC的规范做法，同时避免安全风险：

• 传统ASP.NET MVC：把HighRes.jpg移到项目根目录下的Content文件夹，修改图片路径为：

  <img src="~/Content/HighRes.jpg" alt="HighRes"/>
  

• ASP.NET Core：把HighRes.jpg移到项目根目录下的wwwroot文件夹，路径可直接写：

  <img src="~/HighRes.jpg" alt="HighRes"/>
  

  （wwwroot是ASP.NET Core默认的静态资源根目录，~/会直接指向这里）

临时解决方案（不推荐，存在安全风险） #

如果一定要把图片放在视图同目录，需要两步操作：

1. 修改图片路径为相对路径：

   <img src="./HighRes.jpg" alt="HighRes"/>
   

2. 配置允许Views文件夹访问静态文件：
   • 传统ASP.NET MVC：打开Views文件夹下的Web.config，在<system.webServer>节点中添加静态文件处理规则：

     <handlers>
       <add name="StaticFileHandler" path="*.jpg" verb="GET" type="System.Web.StaticFileHandler" />
     </handlers>
     

   • ASP.NET Core：在Program.cs中修改静态文件中间件配置，包含Views目录：

     app.UseStaticFiles(new StaticFileOptions
     {
         FileProvider = new PhysicalFileProvider(
             Path.Combine(builder.Environment.ContentRootPath, "Views")),
         RequestPath = "/Views"
     });
     

     此时图片路径要改成~/Views/[目标控制器名]/HighRes.jpg

额外补充：你的视图直接写了<head>和<body>标签，如果项目使用了布局页（_Layout.cshtml），可能会导致HTML结构重复。建议把样式和标题放到布局页对应区域，或者在视图顶部的@{}块中添加Layout = null;关闭布局。

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