如何在 blazor 项目中调试图像未找到错误？答案

【问题标题】：How to debug image not found error in a blazor project?如何在 blazor 项目中调试图像未找到错误？
【发布时间】：2022-01-16 00:21:01
【问题描述】：

在我的小型 blazor 项目中，我想在视图中显示图像，如下所示：

<img scr="img/background.jpg" class="img" alt="background">

但我在浏览器中看到的只是“alt”文本（抱歉，图片是深色的，这是一个深色主题的网站）：

图片位于 wwwroot/img/background.jpg。奇怪的是，在同一位置是网页的图标，我在_Host.cshtml 的head 部分中调用它，如下所示

<link rel="icon" type="image/x-icon" href="/image/icon.png">

这显示很好。

在this one 等其他类似帖子之后，我已经尝试将源路径更改为以下任何一个：

这些似乎都不起作用。所以有两个问题：1.我的问题可能是什么问题和2.我如何调试这种“错误路径”类型的错误。对于第二部分，我的直觉是使用浏览器中的“查看源”选项并查找图像，但到目前为止，当服务器将图像呈现给浏览器时，我还没有找到图像的位置。我也尝试使用不同的浏览器，但结果相同。

编辑： 使用https://localhost:7001/img/background.jpg 直接导航到图像也可以。由于某种原因，它只是不想从 html 中显示...

【问题讨论】：

标签： html blazor

【解决方案1】：

<img scr="img/background.jpg" class="img" alt="wrong">
<img src="img/background.jpg" class="img" alt="ok">

看看我在那里做了什么？

【讨论】：

【解决方案2】：

如何调试此类“错误路径”类型的错误。

这是个好问题。

在您的应用运行时，在浏览器中按 F12。确保您可以看到“开发工具”。

选择“网络”选项卡并重新加载您的页面。查找 404 错误。

【讨论】：