如何在 ASP.NET Core MVC 项目中正确添加并显示本地图片

如何在 ASP.NET Core MVC 项目中正确添加并显示本地图片

在 asp.net core mvc 中,静态资源(如图片)必须存放在 `wwwroot` 文件夹下,并通过相对路径(如 `~/images/cars.jpg`)引用,才能被浏览器正常访问;直接使用本地绝对路径(如 `c:/…`)或错误的虚拟路径将导致图片无法显示。

ASP.NET Core 默认仅从 wwwroot 文件夹提供静态文件服务,这是安全设计的一部分——应用不会暴露项目根目录下的任意文件。因此,将图片(如 cars.jpg)直接拖入 Visual Studio 项目的 wwwroot 目录(推荐子文件夹 wwwroot/images/)是正确做法。

✅ 正确操作步骤:

  1. 在解决方案资源管理器中,右键点击 wwwroot → 选择“添加” → “新建文件夹”,命名为 images;
  2. 将 cars.jpg 拖入该 images 文件夹;
  3. 在视图(如 .cshtml)中使用 Tag Helper 或标准 HTML 引用:
@@##@@

⚠️ 注意事项:

EasySite

EasySite

零代码AI网站开发工具

下载

  • ~ 符号由 ASP.NET Core 的 Tag Helper 自动解析为应用根路径(即 /),等价于 汽车图片
  • 确保已启用静态文件中间件(默认模板已包含):Program.cs 中应有 app.UseStaticFiles();;
  • 文件名区分大小写(尤其在 Linux 部署时),建议统一小写命名(如 cars.jpg);
  • 若使用 Razor Pages 或 Area,~/ 始终指向应用根,无需额外调整路径。

? 小技巧:可配合 css/site.css” /> 的写法类比理解——所有静态资源均遵循 wwwroot 为根的发布约定。部署到 IIS 或 Azure App Service 时,该规则同样生效,确保开发与生产环境行为一致。

如何在 ASP.NET Core MVC 项目中正确添加并显示本地图片

https://www.php.cn/faq/2015689.html

发表回复

Your email address will not be published. Required fields are marked *