Category / Section
How to load base64 string images in Blazor Carousel?
5 mins read
In Syncfusion's Blazor Carousel, you can use static images by default. If you have stored images as base64 strings in the database, you can use those images in the Carousel by following the steps below.
Step 2: Retrieve the image from the backend as a base64 string.
protected override void OnInitialized() { base64Bridge = "/9j/4AAQSkZJRgABAQAAAQABAAD/4gIcSUNDX1BST0ZJTEUAAQEAAAIMbLX0Nz8IKApyCAQ14VZAvlCr6Hl4iGIWQGy2zWJF4kk6BCaraVQM"; base64Trees = "/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjwgIyYnKSopGR8tMC0oMCUoKSj/2wB"; } |
Step 5: In your Carousel component, add img elements for each image. Use the base64 strings as the src attribute for each img element.
<div class="control-container"> <SfCarousel> <CarouselItem> <figure class="img-container"> <img src="@($"data:image/jpeg;base64,{base64Bridge}")" alt="Golden Gate Bridge, San Francisco" style="height:100%;width:100%;" /> <figcaption class="img-caption">Golden Gate Bridge, San Francisco</figcaption> </figure> </CarouselItem> <!-- Add remaining items here --> </SfCarousel> </div> |
Conclusion
I hope you enjoyed learning about how to load base64 string images in Blazor Carousel.
You can refer to our Blazor Carousel feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Carousel example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
