fix: image null problem

foxminchan · Jun 9, 2024 · 69af4e3 · 69af4e3
1 parent 4d2c0f8
commit 69af4e3
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 4 deletions.
diff --git a/src/RookieShop.Infrastructure/Storage/Azurite/IAzuriteService.cs b/src/RookieShop.Infrastructure/Storage/Azurite/IAzuriteService.cs
@@ -6,5 +6,5 @@ public interface IAzuriteService
 {
     Task<string> UploadFileAsync(IFormFile file, CancellationToken cancellationToken = default);
     Task DeleteFileAsync(string fileName, CancellationToken cancellationToken = default);
-    string GetFileUrl(string? fileName);
+    string? GetFileUrl(string? fileName);
 }   
diff --git a/src/RookieShop.Infrastructure/Storage/Azurite/Internal/AzuriteService.cs b/src/RookieShop.Infrastructure/Storage/Azurite/Internal/AzuriteService.cs
@@ -43,10 +43,10 @@ public async Task DeleteFileAsync(string fileName, CancellationToken cancellatio
             cancellationToken);
     }
 
-    public string GetFileUrl(string? fileName)
+    public string? GetFileUrl(string? fileName)
     {
         if (string.IsNullOrWhiteSpace(fileName))
-            return string.Empty;
+            return null;
 
         var blobClient = _container.GetBlobClient(fileName);
 

diff --git a/src/RookieShop.StoreFront/Areas/Product/Views/Product/Index.cshtml b/src/RookieShop.StoreFront/Areas/Product/Views/Product/Index.cshtml
@@ -26,7 +26,11 @@ else
                 {
                     <div class="group relative">
                         <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-md bg-gray-200 lg:aspect-none group-hover:opacity-75">
-                            <img asp-append-version="true" loading="lazy" src="@(product.ImageUrl ?? "~/imgs/product/default-preview-image.png")" alt="@product.Name" class="h-full w-full lg:h-full lg:w-full object-cover object-center">
+                            <img asp-append-version="true" 
+                                 loading="lazy" 
+                                 src="@(product.ImageUrl ?? "~/imgs/product/default-preview-image.png")" 
+                                 alt="@product.Name" 
+                                 class="h-full w-full lg:h-full lg:w-full object-cover object-center lg:object-cover lg:object-center" />
                         </div>
                         <div class="mt-4 flex justify-between">
                             <div>

diff --git a/src/RookieShop.StoreFront/wwwroot/css/output.css b/src/RookieShop.StoreFront/wwwroot/css/output.css
@@ -2803,6 +2803,14 @@ video {
     margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
+  .lg\:object-cover {
+    object-fit: cover;
+  }
+
+  .lg\:object-center {
+    object-position: center;
+  }
+
   .lg\:px-28 {
     padding-left: 7rem;
     padding-right: 7rem;