SEO-174654-Blazor-Image-Alt-5

blazor/appbar/design.md

@@ -30,7 +30,7 @@ The following example depicts the code to provide spacing between the home and p
 </div>
 ```
 
-![Blazor AppBar with Spacer](./images/spacer_appbar.png)
+![Blazor AppBar with Spacer.](./images/blazor-appbar-spacer.png)
 {% previewsample "https://blazorplayground.syncfusion.com/embed/htLKWVizhrJGeHZk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Separator
@@ -68,7 +68,7 @@ The following example depicts the code to provide a vertical line between a grou
 ```
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BZrUWhizrrSDjGWv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-![Blazor AppBar with Separator](./images/separator_appbar.png)
+![Blazor AppBar with Separator.](./images/blazor-appbar-separator.png)
 
 ## Media Query
 
@@ -114,7 +114,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t
 </style>
 ```
 
-![Blazor AppBar with Media Query](./images/media_appbar.png)
+![Blazor AppBar with Media Query.](./images/blazor-appbar-media-quary.png)
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hDVUWBsJrBofaJVB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 ## Designing AppBar with Menu
 
@@ -173,7 +173,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t
 </style>
 ```
 
-![Blazor AppBar with Menu](./images/menu_appbar.png)
+![Blazor AppBar with Menu.](./images/blazor-appbar-menu.png)
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BXrgCrsfhVRDMsdT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Designing AppBar with Buttons
@@ -209,7 +209,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t
 </style>
 ```
 
-![Blazor AppBar with Buttons](./images/buttons_appbar.png)
+![Blazor AppBar with Buttons.](./images/blazor-appbar-buttons.png)
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VDVgMBMTLrdehyCb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Designing AppBar with SideBar
@@ -370,7 +370,6 @@ AppBar toggle button used to control the expand and collapse state of **SfSideba
     }
 </style>
 ```
-
-![Blazor AppBar with SideBar](./images/sidebar_appbar.png)
+![Blazor AppBar with SideBar.](./images/blazor-appbar-sidebar.png)
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hDVKirMTrrRbKrNE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}