doc(img): use GetAssetUrl make same path (#6649)

* doc: 使用 GetAssetUrl 获得地址

* refactor: 使用 WebsiteOption 配置值

* doc: 使用 GetAssetUrl 获得路径

* doc: 统一资产路径

* doc: 增加 lazy 懒加载

* doc: 使用统一资源路径

* doc: add alt attribute

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Components/Header.razor

@@ -37,7 +37,7 @@
             <FullScreenButton class="nav-link p-2" TooltipText="@Localizer["FullScreenTooltipText"]" />
         </li>
     </ul>
-    <a class="btn btn-bd-download d-none d-lg-block mb-3 mb-md-0 ms-md-3" target="_blank" href="@DownloadUrl">@DownloadText</a>
+    <a class="btn btn-bd-download d-none d-lg-block mb-3 mb-md-0 ms-md-3" target="_blank" href="@WebsiteOption.Value.WikiUrl">@DownloadText</a>
     <div class="navbar-version ms-2">@_versionString</div>
     <ThemeProvider class="ms-2 d-none d-lg-block"></ThemeProvider>
 </header>

src/BootstrapBlazor.Server/Components/Components/Header.razor.cs

@@ -36,8 +36,6 @@ public partial class Header
     [NotNull]
     private string? TutorialsText { get; set; }
 
-    private const string DownloadUrl = "https://github.com/dotnetcore/BootstrapBlazor/releases?wt.mc_id=DT-MVP-5004174";
-
     private string _versionString = "";
 
     /// <summary>

src/BootstrapBlazor.Server/Components/Layout/HomeLayout.razor

@@ -11,7 +11,7 @@
     <div class="bb-foundation">
         <div class="bb-foundation-content">本项目属于 <a href="https://www.dotnetfoundation.org/">.NET 基金会</a>，并根据其 <a href="https://www.dotnetfoundation.org/code-of-conduct">行为准则</a> 运作</div>
         <a class="bb-foundation-img d-none d-sm-block" href="https://www.dotnetfoundation.org/">
-            <img src="@WebsiteOption.Value.GetAssetUrl("images/dotnet_foundation_v4.png")" width="100" />
+            <img src="@WebsiteOption.Value.GetAssetUrl("images/dotnet_foundation_v4.png")" alt="dotnet-foundation" width="100" />
         </a>
     </div>
     <div class="footer-body">

src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor

@@ -21,7 +21,7 @@
     <DialButton DialMode="DialMode.Radial" Icon="fa-solid fa-gear" Radius="100" Placement="Placement.BottomEnd" class="bb-dial-gear">
         <ButtonTemplate>
             <div class="btn-circle btn-fade dial-button-gear">
-                <img src="@WebsiteOption.Value.GetAssetUrl("images/logo.png")" />
+                <img src="@WebsiteOption.Value.GetAssetUrl("images/logo.png")" alt="logo" />
             </div>
         </ButtonTemplate>
         <ChildContent>

src/BootstrapBlazor.Server/Components/Pages/Chats.razor

@@ -1,6 +1,7 @@
 @page "/ai-chat"
 @using Azure.AI.OpenAI
 @inherits WebSiteModuleComponentBase
+@inject IOptions<WebsiteOptions> WebsiteOption
 @attribute [JSModuleAutoLoader("Pages/Chats.razor.js")]
 
 <h3>@Localizer["ChatsTitle"]</h3>
@@ -36,7 +37,7 @@
                 <div class="msg-role">
                     @if (message.Role == ChatRole.User)
                     {
-                        <img src="./favicon.png">
+                        <img src="@WebsiteOption.Value.GetAssetUrl("favicon.png")" alt="avatar">
                     }
                     else
                     {

src/BootstrapBlazor.Server/Components/Pages/Index.razor

@@ -7,14 +7,14 @@
 <section class="bd-masthead">
     <div class="container-xxl bd-gutter">
         <div class="text-center d-flex align-items-center flex-column">
-            <a class="d-inline-flex text-dark text-decoration-none" href="https://github.com/dotnetcore/BootstrapBlazor?wt.mc_id=DT-MVP-5004174" rel="noopener" target="_blank">
+            <a class="d-inline-flex text-dark text-decoration-none" href="@WebsiteOption.Value.GithubRepositoryUrl" rel="noopener" target="_blank">
                 <span class="py-2 px-3 rounded-5 masthead-notice">
                     @Localizer["Support"]
                 </span>
             </a>
             <div class="bb-logo d-sm-block mx-auto my-5">
                 <div class="holder"></div>
-                <img src="./favicon.png" alt="bootstrap-blazor">
+                <img src="@WebsiteOption.Value.GetAssetUrl("favicon.png")" alt="bootstrap-blazor">
             </div>
             <h1 class="mb-3 fw-semibold">@Localizer["Title"]</h1>
             <p class="lead mb-4">
@@ -27,15 +27,15 @@
             <p class="text-body-secondary mb-0">
                 Currently <strong>@_versionString</strong>
                 <span class="px-1">·</span>
-                <a href="https://github.com/dotnetcore/BootstrapBlazor?wt.mc_id=DT-MVP-5004174" class="link-secondary">Download</a>
+                <a href="@WebsiteOption.Value.GithubRepositoryUrl" class="link-secondary">Download</a>
                 <span class="px-1">·</span>
-                <a href="https://github.com/dotnetcore/BootstrapBlazor/releases?wt.mc_id=DT-MVP-5004174" class="link-secondary text-nowrap">All releases</a>
+                <a href="@WebsiteOption.Value.WikiUrl" class="link-secondary text-nowrap">All releases</a>
             </p>
         </div>
     </div>
     <div class="donate">
         <h3>@Localizer["DonateH1"]</h3>
         <h5 class="d-none d-sm-block mb-3">@Localizer["DonateH2"]</h5>
-        <img alt="barcode" class="barcode" src="@WebsiteOption.Value.GetAssetUrl("images/[email protected]")" />
+        <img src="@WebsiteOption.Value.GetAssetUrl("images/[email protected]")" alt="barcode" class="barcode" loading="lazy" />
     </div>
 </section>

src/BootstrapBlazor.Server/Components/Samples/BootstrapBlazorIcons.razor

@@ -1,5 +1,6 @@
 @page "/icon"
 @inject IStringLocalizer<BootstrapBlazorIcons> Localizer
+@inject IOptions<WebsiteOptions> WebsiteOption
 
 <h3>@Localizer["IconsTitle"]</h3>
 
@@ -24,6 +25,6 @@
 
 <DemoBlock Title="@Localizer["ImageTitle"]" Introduction="@Localizer["ImageIntro"]" Name="Image">
     <BootstrapBlazorIcon>
-        <img src="./favicon.png" alt="img" />
+        <img src="@WebsiteOption.Value.GetAssetUrl("favicon.png")" alt="img" />
     </BootstrapBlazorIcon>
 </DemoBlock>

src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor

@@ -1,6 +1,7 @@
 @page "/tutorials/template5"
 @layout TutorialsLayout
 @inherits WebSiteModuleComponentBase
+@inject IOptions<WebsiteOptions> WebsiteOption
 @attribute [JSModuleAutoLoader("Samples/Tutorials/LoginAndRegister/Template5.razor.js", AutoInvokeDispose = false)]
 
 <HeadContent>
@@ -57,7 +58,7 @@
                         <source src="samples/login5/loading.mov" type="video/quicktime; codecs=hvc1.1.6.H120.b0">
                         <source src="samples/login5/loading.webm" type="video/webm; codecs=vp9">
                         <source src="samples/login5/loading.mp4" type="video/mp4; codecs=avc1.42E01E">
-                        <img src="samples/login5/loading.png" alt="" role="presentation">
+                        <img src="@WebsiteOption.Value.GetAssetUrl("samples/login5/loading.png")" alt="" role="presentation">
                     </video>
                 </div>
                 <p class="text-center text-muted" style="font-size: 0.75rem;">此登录高仿微软登录 UI</p>