Blazor中图片无法显示求助：排查图片加载失败问题

我在Blazor项目中使用代码 <img src="~/images/Loading.gif" alt="Loading" /> 引入图片，但图片无法正常显示，预期该图片应能加载展示。

附相关截图：
图片加载失败截图

以下是具体排查方向：

• 核对文件实际位置与路径
  Blazor里~/指向项目的wwwroot目录，必须确保wwwroot/images/Loading.gif文件存在，且文件名（包括大小写）完全匹配——Windows本地开发不区分大小写，但部署到Linux服务器时会严格区分，别出现Loading.gif写成loading.gif的情况。

• 确认静态文件服务已启用

  • Blazor Server项目：检查Program.cs里是否有app.UseStaticFiles();，而且要放在app.MapBlazorHub();之前，否则静态文件无法被访问。
  • Blazor WASM项目：默认已配置静态文件服务，若手动修改过Program.cs，别误删了相关配置。

• 尝试调整路径写法
  可以换几种路径写法测试：

  • 相对路径：如果组件在Pages/Shared目录，用../images/Loading.gif（根据组件所在层级调整相对层级）。
  • 根路径：直接写/images/Loading.gif（从网站根目录开始定位，同样依赖wwwroot下的文件结构）。
  • Blazor Server专属：注入IWebHostEnvironment后拼接路径，代码示例：

    @inject IWebHostEnvironment env
    <img src="@($"{env.WebRootPath}/images/Loading.gif")" alt="Loading" />
    

• 清除浏览器缓存
  按Ctrl+F5强制刷新页面，或者打开开发者工具（F12），在「网络」面板勾选「禁用缓存」后重新加载，避免旧缓存导致的加载异常。

• 验证图片文件完整性
  直接在浏览器地址栏输入图片的完整访问URL（比如http://localhost:5000/images/Loading.gif），如果无法打开，说明图片文件损坏，替换成正常的Loading.gif即可。

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