Inferred picturefechingservice

Blazor3State/Pages/FetchData.razor

@@ -1,7 +1,9 @@
 @page "/fetchdata"
 
 @using Blazor3State.Data
-@inject WeatherForecastService ForecastService
+@using System.IO
+
+@inject IHttpClientFactory httpClientFactory
 
 <h1>Showing states in blazor</h1>
 
@@ -14,7 +16,7 @@
             <div class="lds-default"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
         </Loading>
         <Loaded>
-            <img src="https://loremflickr.com/200/300" alt="Alternate text" />
+            <img src="@imageData" alt="Alternate text" />
         </Loaded>
         <ErrorContent>
             <p><em>An error has occurred. Click new image to try again !</em></p>
@@ -25,21 +27,58 @@
 @code {
     Random random = new Random();
     LoadingContainerState state;
+    string imageData;
 
     protected override async Task OnInitializedAsync()
     {
         await LoadImage();
     }
 
+    //async Task LoadImage()
+    //{
+    //    state = LoadingContainerState.Loading;
+    //    await Task.Delay(2000);
+    //    if (random.Next(3) == 2)
+    //    {
+    //        state = LoadingContainerState.Error;
+    //    }
+    //    else state = LoadingContainerState.Loaded;
+
+    //}
+
     async Task LoadImage()
     {
         state = LoadingContainerState.Loading;
         await Task.Delay(2000);
-        if (random.Next(3) == 2)
+
+        var request = new HttpRequestMessage(HttpMethod.Get, "https://loremflickr.com/400/500");
+
+        var client = httpClientFactory.CreateClient();
+
+        var response = await client.SendAsync(request);
+
+        if (response.IsSuccessStatusCode)
         {
-            state = LoadingContainerState.Error;
+            using var responseStream = await response.Content.ReadAsStreamAsync();
+            var header = response.Content.Headers.FirstOrDefault(x => x.Key == "Content-Type");
+            string imageType = header.Value.First();
+
+            string encodedImage;
+            using (MemoryStream m = new MemoryStream())
+            {
+                responseStream.CopyTo(m);
+                byte[] imageBytes = m.ToArray();
+                encodedImage = Convert.ToBase64String(imageBytes);
             }
-        else state = LoadingContainerState.Loaded;
+
+            imageData = $"data:{imageType};base64,{encodedImage}";
+            state = LoadingContainerState.Loaded;
 
         }
+        else
+            state = LoadingContainerState.Error;
+    }
+
+
+
 }

Blazor3State/Startup.cs

@@ -29,6 +29,7 @@ namespace Blazor3State
             services.AddRazorPages();
             services.AddServerSideBlazor();
             services.AddSingleton<WeatherForecastService>();
+            services.AddHttpClient();
         }
 
         // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.

Blazor3State/wwwroot/css/site.css

@@ -187,8 +187,8 @@ app {
     justify-content: center;
     align-items: center;
     background: #aaa;
-    height: 300px;
+    height: 500px;
-    width: 200px;
+    width: 400px;
 }
 
 .lds-default {