MainLayout 页面上的图像

Question

我正在尝试将我公司的徽标放在 MainLayout 页面的 blazor 页面上。 MainLayout 页面存在于共享目录中，我的徽标图像位于 Images 目录中。以下是结构：

这是我 MainLayout.razor 页面中的内容：

<div class="main">
   
    <nav class="navbar navbar-light bg-light">
        <a class="navbar-brand" href="#">
            <img src="../Images/Logo.png" width="30" height="30" alt="">My company logo
        </a>
    </nav>

    <div class="content px-4">
        @Body
    </div>
</div>

我运行应用程序时没有看到徽标。下面是我看到的图像：

任何帮助将不胜感激。

Answer 1

这是一个常见的 html 问题，不仅仅是 Blazor。源地址中的“../”表示“上一层”。但它并没有在您的 Blazor 文件夹中上升一级——从浏览器的角度来看它上升了一级。

运行您在 Chrome 中的站点，然后右键单击“检查”以打开开发页面，然后再次右键单击“检查”图像所在的位置，然后环顾四周标记，您应该能够看到 Chrome 认为您希望它显示的路径。您会发现它不是正确的文件夹。

尝试使用前缀来查看它如何改变预期的图像路径：

"/Images/Logo.png"=20=]
"./Images/Logo.png"=20=]
"~/Images/Logo.png"

MainLayout 页面上的图像

Image on the MainLayout page

blazor-server-side