如何在MVC5的Index.cshtml视图中设置背景图片

嘿，我懂你遇到的困扰了——你之前把图片放在Views/Home文件夹里，不管怎么调整路径都加载不出来，这其实是MVC的安全机制在“搞事情”！

核心原因 #

MVC默认会阻止直接访问Views文件夹里的文件，这是为了防止用户直接获取视图源码或者未经授权访问里面的内容。所以你就算写对了相对路径，服务器也会拦截这个请求，自然加载不出图片。

正确的解决方案（推荐） #

把静态资源（比如图片）放到专门的静态文件夹里，MVC默认允许访问这类文件夹，步骤如下：

1. 在你的项目根目录（CleaningShell.Web下面）创建一个Images文件夹（或者用现成的Content文件夹也可以）。
2. 把pexels-photo-955470.jpeg移动到这个新文件夹里。
3. 在Index.cshtml里用Razor的路径辅助方法生成正确的URL，代码如下：

<body style="background-image: url('@Url.Content("~/Images/pexels-photo-955470.jpeg")')">

或者更简洁的写法（Razor会自动解析~/为应用根路径）：

<body style="background-image: url('~/Images/pexels-photo-955470.jpeg')">

不推荐的方案（仅作了解） #

如果你非要把图片留在Views/Home里，那需要修改Views文件夹下的Web.config来允许访问图片文件，但这会降低安全性，不建议在生产环境使用：

1. 打开CleaningShell.Web/Views/Web.config
2. 在<system.webServer>节点下添加以下配置：

<handlers>
  <add name="AllowImagesInViews" path="*.jpeg,*.png,*.gif" verb="GET" type="System.Web.StaticFileHandler" />
</handlers>

3. 然后视图里的路径可以写成：

<body style="background-image: url('@Url.Content("~/Views/Home/pexels-photo-955470.jpeg")')">

还是强烈推荐第一种方案，把静态资源和视图文件分开管理，这才是MVC的最佳实践哦！

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