From 0220f2aa3f5078dbe273294fb3b2dd76630299a6 Mon Sep 17 00:00:00 2001 From: Argo-Lenovo Date: Mon, 4 Apr 2022 13:27:22 +0800 Subject: [PATCH 1/4] =?UTF-8?q?refactor:=20=E5=A2=9E=E5=8A=A0=20HandleErro?= =?UTF-8?q?r=20=E5=8F=82=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Image/Image.razor | 32 ++++++++++++------- .../Components/Image/Image.razor.cs | 18 ++++++----- 2 files changed, 31 insertions(+), 19 deletions(-) diff --git a/src/BootstrapBlazor/Components/Image/Image.razor b/src/BootstrapBlazor/Components/Image/Image.razor index 06d37e592..0e06e557e 100644 --- a/src/BootstrapBlazor/Components/Image/Image.razor +++ b/src/BootstrapBlazor/Components/Image/Image.razor @@ -5,29 +5,39 @@ @if (ShowImage) { @RenderImage() - @if (ShowPlaceHolder && !Loaded) + @if (HandleError && IsError) { - @if(PlaceHolderTemplate != null) + @if (ErrorTemplate != null) + { + @ErrorTemplate + } + else + { +
+
+ +
+
+ } + } + else if (ShowPlaceHolder && !IsLoaded) + { + @if (PlaceHolderTemplate != null) { @PlaceHolderTemplate } else {
- @if(!string.IsNullOrEmpty(PlaceHolder)) - { -
@PlaceHolder
- } +
+ +
} } } - else if(PlaceHolderTemplate != null) + else if (PlaceHolderTemplate != null) { @PlaceHolderTemplate } - else if (ErrorTemplate != null) - { - @ErrorTemplate - } diff --git a/src/BootstrapBlazor/Components/Image/Image.razor.cs b/src/BootstrapBlazor/Components/Image/Image.razor.cs index 9a53dd6dd..bcb793290 100644 --- a/src/BootstrapBlazor/Components/Image/Image.razor.cs +++ b/src/BootstrapBlazor/Components/Image/Image.razor.cs @@ -41,16 +41,16 @@ public partial class Image public string? Alt { get; set; } /// - /// 获得/设置 图片加载时占位符 默认 null + /// 获得/设置 是否显示占位符 适用于大图片加载 默认 false /// [Parameter] - public string? PlaceHolder { get; set; } + public bool ShowPlaceHolder { get; set; } /// - /// 获得/设置 是否显示占位符 适用于大图片加载 占位符内容请查看 默认 false + /// 获得/设置 加载失败时是否显示错误占位符 默认 false /// [Parameter] - public bool ShowPlaceHolder { get; set; } + public bool HandleError { get; set; } /// /// 获得/设置 占位模板 未设置 或者 正在加载时显示 默认 null 未设置 @@ -72,7 +72,9 @@ public partial class Image private bool ShowImage => !string.IsNullOrEmpty(Url); - private bool Loaded { get; set; } + private bool IsLoaded { get; set; } + + private bool IsError { get; set; } private RenderFragment RenderImage() => builder => { @@ -90,7 +92,7 @@ public partial class Image { builder.AddAttribute(4, "onload", EventCallback.Factory.Create(this, args => { - Loaded = true; + IsLoaded = true; })); } builder.CloseElement(); @@ -98,11 +100,11 @@ public partial class Image private void OnError(ErrorEventArgs e) { - + IsError = true; } private void OnLoad(ProgressEventArgs e) { - Loaded = true; + IsLoaded = true; } } -- Gitee From 30d193cbb0947af9dafd30e5f7256735509380e9 Mon Sep 17 00:00:00 2001 From: Argo-Lenovo Date: Mon, 4 Apr 2022 13:27:39 +0800 Subject: [PATCH 2/4] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E5=8D=A0=E4=BD=8D?= =?UTF-8?q?=E6=A8=A1=E6=9D=BF=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Shared/Samples/Images.razor | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/BootstrapBlazor.Shared/Samples/Images.razor b/src/BootstrapBlazor.Shared/Samples/Images.razor index 80bb77705..adec746bf 100644 --- a/src/BootstrapBlazor.Shared/Samples/Images.razor +++ b/src/BootstrapBlazor.Shared/Samples/Images.razor @@ -29,7 +29,7 @@ - +
图片加载后浏览器默认会缓存，建议 F12 关闭缓存体验此功能
@@ -38,7 +38,13 @@
自定义
- + + +
+
加载中 ...
+
+ +
-- Gitee From 911021d4df224e404e522867860a83126300543f Mon Sep 17 00:00:00 2001 From: Argo-Lenovo Date: Mon, 4 Apr 2022 13:58:48 +0800 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=8A=A0?= =?UTF-8?q?=E8=BD=BD=E5=A4=B1=E8=B4=A5=E6=A8=A1=E6=9D=BF=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Image/Image.razor | 50 ++++++---------- .../Components/Image/Image.razor.cs | 59 +++++++++++-------- 2 files changed, 53 insertions(+), 56 deletions(-) diff --git a/src/BootstrapBlazor/Components/Image/Image.razor b/src/BootstrapBlazor/Components/Image/Image.razor index 0e06e557e..6926e27e7 100644 --- a/src/BootstrapBlazor/Components/Image/Image.razor +++ b/src/BootstrapBlazor/Components/Image/Image.razor @@ -4,40 +4,26 @@
@if (ShowImage) { - @RenderImage() - @if (HandleError && IsError) - { - @if (ErrorTemplate != null) - { - @ErrorTemplate - } - else - { -
-
- -
-
- } - } - else if (ShowPlaceHolder && !IsLoaded) - { - @if (PlaceHolderTemplate != null) - { - @PlaceHolderTemplate - } - else - { -
-
- -
-
- } - } + @RenderChildContent() } - else if (PlaceHolderTemplate != null) + else if (ShouldRenderPlaceHolder) { @PlaceHolderTemplate }
+ +@code { + RenderFragment RenderErrorTemplate() => + @
+
+ +
+
; + + RenderFragment RenderPlaceHolder() => + @
+
+ +
+
; +} diff --git a/src/BootstrapBlazor/Components/Image/Image.razor.cs b/src/BootstrapBlazor/Components/Image/Image.razor.cs index bcb793290..4a295dc19 100644 --- a/src/BootstrapBlazor/Components/Image/Image.razor.cs +++ b/src/BootstrapBlazor/Components/Image/Image.razor.cs @@ -76,35 +76,46 @@ public partial class Image private bool IsError { get; set; } - private RenderFragment RenderImage() => builder => + private RenderFragment RenderChildContent() => builder => { - builder.OpenElement(0, "img"); - builder.AddAttribute(1, "class", ImageClassString); - if (!string.IsNullOrEmpty(Url)) + if (!IsError) { - builder.AddAttribute(2, "src", Url); - } - if (!string.IsNullOrEmpty(Alt)) - { - builder.AddAttribute(3, "alt", Alt); + builder.OpenElement(0, "img"); + builder.AddAttribute(1, "class", ImageClassString); + if (!string.IsNullOrEmpty(Url)) + { + builder.AddAttribute(2, "src", Url); + } + if (!string.IsNullOrEmpty(Alt)) + { + builder.AddAttribute(3, "alt", Alt); + } + if (ShowPlaceHolder) + { + builder.AddAttribute(4, "onload", EventCallback.Factory.Create(this, args => + { + IsLoaded = true; + })); + } + if (HandleError || ErrorTemplate != null) + { + builder.AddAttribute(4, "onerror", EventCallback.Factory.Create(this, args => + { + IsError = true; + })); + } + builder.CloseElement(); + + if (ShouldRenderPlaceHolder) + { + builder.AddContent(5, PlaceHolderTemplate ?? RenderPlaceHolder()); + } } - if (ShowPlaceHolder) + else { - builder.AddAttribute(4, "onload", EventCallback.Factory.Create(this, args => - { - IsLoaded = true; - })); + builder.AddContent(6, ErrorTemplate ?? RenderErrorTemplate()); } - builder.CloseElement(); }; - private void OnError(ErrorEventArgs e) - { - IsError = true; - } - - private void OnLoad(ProgressEventArgs e) - { - IsLoaded = true; - } + private bool ShouldRenderPlaceHolder => (ShowPlaceHolder || PlaceHolderTemplate != null) && !IsLoaded; } -- Gitee From 682eabd06d010985b99fcf2a9f0305a7a4d8657f Mon Sep 17 00:00:00 2001 From: Argo-Lenovo Date: Mon, 4 Apr 2022 14:00:05 +0800 Subject: [PATCH 4/4] =?UTF-8?q?doc:=20=E5=A2=9E=E5=8A=A0=E5=8A=A0=E8=BD=BD?= =?UTF-8?q?=E9=94=99=E8=AF=AF=E6=A8=A1=E6=9D=BF=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Samples/Images.razor | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/BootstrapBlazor.Shared/Samples/Images.razor b/src/BootstrapBlazor.Shared/Samples/Images.razor index adec746bf..d07773f2d 100644 --- a/src/BootstrapBlazor.Shared/Samples/Images.razor +++ b/src/BootstrapBlazor.Shared/Samples/Images.razor @@ -74,3 +74,22 @@ + + +
+
+
Url 路径错误
+ +
+
+
自定义
+ + +
+
加载失败
+
+ + +
+
+ -- Gitee