From a3c60e83caa0e905c4ec9f13afd0ba19edb93be2 Mon Sep 17 00:00:00 2001
From: "1152958806@qq.com" <1152958806@qq.com>
Date: Sat, 19 Aug 2023 19:04:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=89=87=E6=87=92=E5=8A=A0=E8=BD=BD-?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 settings.yaml                                 | 11 ++++
 templates/album.html                          |  4 +-
 templates/macro/bangumi-item.html             |  2 +-
 templates/macro/content-links.html            | 14 ++---
 templates/modules/layouts/layout.html         |  2 +-
 templates/modules/post-list.html              |  2 +-
 templates/modules/post/relatedPosts.html      |  4 +-
 .../modules/widgets/about-widgets/game.html   |  2 +-
 .../modules/widgets/aside/friend-link.html    |  4 +-
 templates/modules/widgets/aside/profile.html  |  6 +-
 .../modules/widgets/aside/recent-posts.html   |  2 +-
 templates/modules/widgets/banner-group.html   | 60 +++++++++----------
 templates/modules/widgets/top-group.html      |  4 +-
 templates/moments.html                        |  2 +-
 templates/post.html                           |  4 +-
 15 files changed, 67 insertions(+), 56 deletions(-)

diff --git a/settings.yaml b/settings.yaml
index 0e75c752..0ea41a87 100644
--- a/settings.yaml
+++ b/settings.yaml
@@ -2667,14 +2667,25 @@ spec:
           value:
             enable: true
             errorImg: "/themes/theme-hao/assets/images/404.gif"
+            loadingImg: /themes/theme-hao/assets/images/404s.gif
           children:
             - $formkit: radio
               name: enable
+              id: enable
+              key: enable
               options:
                 - label: 启用
                   value: true
                 - label: 禁用
                   value: false
+            - $formkit: attachment
+              name: loadingImg
+              id: loadingImg
+              key: loadingImg
+              if: $get(enable).value
+              label: 加载图片
+              validation: required
+              placeholder: 请输入图片 url
             - $formkit: attachment
               name: errorImg
               label: 图片加载失败图
diff --git a/templates/album.html b/templates/album.html
index 2f333b39..18dde1ca 100644
--- a/templates/album.html
+++ b/templates/album.html
@@ -25,7 +25,7 @@
                             <div class="card" th:onclick="go([[${group.metadata.name}]])">
                                 <img class="card_cover"
                                      th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                                     th:src="${isLazyload ? dataImage : #annotations.get(group, 'cover')}"
+                                     th:src="${isLazyload ? loadingImg : #annotations.get(group, 'cover')}"
                                      th:data-lazy-src="${ isLazyload ? #annotations.get(group, 'cover') : ''}"
                                      >
                                 <div class="card__content">
@@ -46,7 +46,7 @@
                             <figure class="gallery-group">
                                 <img class="gallery-group-img no-lightbox"
                                      th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                                     th:src="${isLazyload ? dataImage : #annotations.get(group, 'cover')}"
+                                     th:src="${isLazyload ? loadingImg : #annotations.get(group, 'cover')}"
                                      th:data-lazy-src="${ isLazyload ? #annotations.get(group, 'cover') : ''}"
 
                                      alt="Group Image Gallery">
diff --git a/templates/macro/bangumi-item.html b/templates/macro/bangumi-item.html
index 9a2e6473..6c78a7a8 100644
--- a/templates/macro/bangumi-item.html
+++ b/templates/macro/bangumi-item.html
@@ -4,7 +4,7 @@
     <div class="bangumi-item">
         <div class="bangumi-picture">
             <img
-                    th:src="${isLazyload ? dataImage : spec.cover}"
+                    th:src="${isLazyload ? loadingImg : spec.cover}"
                     th:data-lazy-src="${ isLazyload ? spec.cover : ''}"
                     referrerpolicy="no-referrer" width="110"
                     th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
diff --git a/templates/macro/content-links.html b/templates/macro/content-links.html
index 99960dbc..d7271aa8 100644
--- a/templates/macro/content-links.html
+++ b/templates/macro/content-links.html
@@ -25,7 +25,7 @@
                                    th:title="${linkOdd.spec.displayName}"
                                    th:with="linkOdd = ${group.links.get(iterStat.index - 1)}">
                                     <img th:with=" img = @{${linkOdd.spec.logo}}"
-                                         th:src="${isLazyload ? dataImage : img}"
+                                         th:src="${isLazyload ? loadingImg : img}"
                                          th:data-lazy-src="${ isLazyload ? img : ''}"
                                          th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
                                          th:title="${linkOdd.spec.displayName}">
@@ -33,7 +33,7 @@
                                 <a class="tags-group-icon" target="_blank" th:href="${linkEven.spec.url}"
                                    th:title="${linkEven.spec.displayName}" th:with="linkEven = ${link}">
                                     <img th:with="img = @{${linkEven.spec.logo}}"
-                                         th:src="${isLazyload ? dataImage : img}"
+                                         th:src="${isLazyload ? loadingImg : img}"
                                          th:data-lazy-src="${ isLazyload ? img : ''}"
                                          th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
                                          th:title="${linkEven.spec.displayName}">
@@ -97,7 +97,7 @@
                             <img class="flink-avatar" style="pointer-events: none;" th:alt="${link.spec.displayName}"
                                  th:with="img = @{${#strings.isEmpty(#annotations.get(link, 'siteshot')) ? link.spec.logo : #annotations.get(link,'siteshot') }}"
                                  th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                                 th:src="${isLazyload ? dataImage : img}"
+                                 th:src="${isLazyload ? loadingImg : img}"
                                  th:data-lazy-src="${ isLazyload ? img : ''}">
                         </a>
 
@@ -106,7 +106,7 @@
                             <div class="site-card-avatar">
                                 <img class="flink-avatar cf-friends-avatar" th:alt="${link.spec.displayName}"
                                      th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                                     th:src="${isLazyload ? dataImage : link.spec.logo}"
+                                     th:src="${isLazyload ? loadingImg : link.spec.logo}"
                                      th:data-lazy-src="${ isLazyload ? link.spec.logo : ''}">
                             </div>
                             <div class="site-card-text">
@@ -130,14 +130,14 @@
                            th:title="${link.spec.displayName}">
                             <img class="flink-avatar cf-friends-avatar" th:alt="${link.spec.displayName}"
                                  th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                                 th:src="${isLazyload ? dataImage : link.spec.logo}"
+                                 th:src="${isLazyload ? loadingImg : link.spec.logo}"
                                  th:data-lazy-src="${ isLazyload ? link.spec.logo : ''}">
                             <div class="flink-item-info">
                                 <span class="flink-item-name cf-friends-name" th:text="${link.spec.displayName}"></span>
                                 <span class="flink-item-desc" th:text="${link.spec.description}"
                                       th:title="${link.spec.description}"></span>
                                 <img th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                                     th:src="${isLazyload ? dataImage : link.spec.logo}"
+                                     th:src="${isLazyload ? loadingImg : link.spec.logo}"
                                      th:data-lazy-src="${ isLazyload ? link.spec.logo : ''}">
                             </div>
                         </a>
@@ -151,7 +151,7 @@
                            th:title="${link.spec.displayName}">
                             <img class="flink-avatar cf-friends-avatar"
                                  th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                                 th:src="${isLazyload ? dataImage : link.spec.logo}"
+                                 th:src="${isLazyload ? loadingImg : link.spec.logo}"
                                  th:data-lazy-src="${ isLazyload ? link.spec.logo : ''}"
                                  th:alt="${link.spec.displayName}">
                             <div class="img-alt is-center">[[${link.spec.displayName}]]</div>
diff --git a/templates/modules/layouts/layout.html b/templates/modules/layouts/layout.html
index d39bdaad..c90099a2 100644
--- a/templates/modules/layouts/layout.html
+++ b/templates/modules/layouts/layout.html
@@ -6,7 +6,7 @@
       theme_version = ${ theme.config.other.staticResource.use == 'local' ? '?v='+ theme.spec.version : ''},
       errorImg = @{${theme.config.other.vanillaLazyload.errorImg}},
       isLazyload = ${theme.config.other.vanillaLazyload.enable},
-      dataImage = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'">
+      loadingImg = ${theme.config.other.vanillaLazyload.loadingImg}">
 
 <!-- head 中自定义的  -->
 
diff --git a/templates/modules/post-list.html b/templates/modules/post-list.html
index 36e4e4f4..405f2c57 100644
--- a/templates/modules/post-list.html
+++ b/templates/modules/post-list.html
@@ -20,7 +20,7 @@
                      th:alt="${post.spec.title}"
                      th:attr="onerror='this.onerror=null;this.src=\''+@{${errorImg}}+'\''"
                      th:data-lazy-src="${ isLazyload ? img : ''}"
-                     th:src="${isLazyload ? dataImage : img}">
+                     th:src="${isLazyload ? loadingImg : img}">
             </a>
         </div>
         <!-- 类别非空时 -->
diff --git a/templates/modules/post/relatedPosts.html b/templates/modules/post/relatedPosts.html
index 317168df..e36d770b 100644
--- a/templates/modules/post/relatedPosts.html
+++ b/templates/modules/post/relatedPosts.html
@@ -19,7 +19,7 @@ containsTitle = ${#strings.contains(recommandPosts,post.spec.title)}">
                         <img alt="cover" class="cover" id="preimg"
                              th:with="img = ${#strings.isEmpty(recommandPost.spec.cover) ? theme.config.layout.postRandomImg : recommandPost.spec.cover}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}">
                         <div class="content is-center">
                             <div class="date" style="color: white"><i class="far fa-calendar-alt fa-fw"></i>
@@ -40,7 +40,7 @@ containsTitle = ${#strings.contains(recommandPosts,post.spec.title)}">
                         <img class="cover" alt="cover"
                              th:with="img = ${#strings.isEmpty(recommandPost.spec.cover) ? theme.config.layout.postRandomImg : recommandPost.spec.cover}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}">
                         <div class="content is-center">
                             <div class="date"><i class="far fa-calendar-alt fa-fw"></i>
diff --git a/templates/modules/widgets/about-widgets/game.html b/templates/modules/widgets/about-widgets/game.html
index 721ee19d..3cc0872d 100644
--- a/templates/modules/widgets/about-widgets/game.html
+++ b/templates/modules/widgets/about-widgets/game.html
@@ -41,7 +41,7 @@
                     <div class="comic-item-cover"><img
                             th:with="img = @{${comic.bg}}"
                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                            th:src="${isLazyload ? dataImage : img}"
+                            th:src="${isLazyload ? loadingImg : img}"
                             th:data-lazy-src="${ isLazyload ? img : ''}"
                             th:alt="${comic.title}"
                             draggable="false" >
diff --git a/templates/modules/widgets/aside/friend-link.html b/templates/modules/widgets/aside/friend-link.html
index 3a5c9846..e9fc5819 100644
--- a/templates/modules/widgets/aside/friend-link.html
+++ b/templates/modules/widgets/aside/friend-link.html
@@ -18,7 +18,7 @@
                    class="card-friend-item online-friend-link" th:href="${link.spec.url}" th:title="${link.spec.displayName}"
                    target="_blank"><img class="no-lightbox card-friend-avatar"
                                         th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                                        th:src="${isLazyload ? dataImage : link.spec.logo}"
+                                        th:src="${isLazyload ? loadingImg : link.spec.logo}"
                                         th:data-lazy-src="${ isLazyload ? link.spec.logo : ''}"
                                         th:alt="${link.spec.displayName}">
                     <div class="card-friend-details">
@@ -37,7 +37,7 @@
                    class="card-friend-item offline-friend-link" th:href="${link.spec.url}" th:title="${link.spec.displayName}"
                    target="_blank"><img class="no-lightbox card-friend-avatar"
                                         th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                                        th:src="${isLazyload ? dataImage : link.spec.logo}"
+                                        th:src="${isLazyload ? loadingImg : link.spec.logo}"
                                         th:data-lazy-src="${ isLazyload ? link.spec.logo : ''}"
                                         th:alt="${link.spec.displayName}">
                     <div class="card-friend-details">
diff --git a/templates/modules/widgets/aside/profile.html b/templates/modules/widgets/aside/profile.html
index 3270f98a..46cc409a 100644
--- a/templates/modules/widgets/aside/profile.html
+++ b/templates/modules/widgets/aside/profile.html
@@ -15,7 +15,7 @@
                     <img class="avatar-img"
                          th:with=" img = @{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}"
                          th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                         th:src="${isLazyload ? dataImage : img}"
+                         th:src="${isLazyload ? loadingImg : img}"
                          th:data-lazy-src="${ isLazyload ? img : ''}">
                 </div>
                 <div class="author-info__name" th:if="${#strings.isEmpty(theme.config.sidebar.profile.profileName)}"
@@ -147,13 +147,13 @@
                 <img class="avatar-img" alt="avatar"
                      th:with="img = @{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}"
                      th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                     th:src="${isLazyload ? dataImage : img}"
+                     th:src="${isLazyload ? loadingImg : img}"
                      th:data-lazy-src="${ isLazyload ? img : ''}">
                 <div class="avatar-sticker">
                     <img class="avatar-sticker-img" alt="avatar"
                          th:with="img = @{${theme.config.sidebar.profile.stickerImg}}"
                          th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                         th:src="${isLazyload ? dataImage : img}"
+                         th:src="${isLazyload ? loadingImg : img}"
                          th:data-lazy-src="${ isLazyload ? img : ''}">
                 </div>
             </div>
diff --git a/templates/modules/widgets/aside/recent-posts.html b/templates/modules/widgets/aside/recent-posts.html
index e1d1c215..24c86d59 100644
--- a/templates/modules/widgets/aside/recent-posts.html
+++ b/templates/modules/widgets/aside/recent-posts.html
@@ -10,7 +10,7 @@
                 <img th:alt="${post.spec.title}"
                      th:with="img = ${#strings.isEmpty(post.spec.cover) ? postRandomImg+post.spec.title : post.spec.cover}"
                      th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                     th:src="${isLazyload ? dataImage : img}"
+                     th:src="${isLazyload ? loadingImg : img}"
                      th:data-lazy-src="${ isLazyload ? img : ''}">
             </a>
             <div class="content">
diff --git a/templates/modules/widgets/banner-group.html b/templates/modules/widgets/banner-group.html
index 892cbb72..33e118e2 100644
--- a/templates/modules/widgets/banner-group.html
+++ b/templates/modules/widgets/banner-group.html
@@ -22,7 +22,7 @@
                         <img
                              th:with=" img = ${assets_link + '/images/icons/AfterEffect.png'}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}"
                              title="AfterEffect">
                     </div>
@@ -30,7 +30,7 @@
                         <img
                              th:with=" img = ${assets_link + '/images/icons/Sketch.png'}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}"
                              title="Sketch">
                     </div>
@@ -40,7 +40,7 @@
                         <img
                              th:with=" img = ${assets_link + '/images/icons/Docker.png'}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}"
                              title="Docker">
                     </div>
@@ -48,7 +48,7 @@
                         <img
                              th:with=" img = ${assets_link + '/images/icons/Photoshop.png'}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}"
                              title="Photoshop">
                     </div>
@@ -58,7 +58,7 @@
                         <img
                              th:with=" img = ${assets_link + '/images/icons/FinalCutPro.png'}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}"
                              title="FinalCutPro">
                     </div>
@@ -66,7 +66,7 @@
                         <img
                              th:with=" img = ${assets_link + '/images/icons/Python.png'}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}"
                              title="Python">
                     </div>
@@ -76,7 +76,7 @@
                         <img
                              th:with=" img = ${assets_link + '/images/icons/Swift.png'}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}"
                              title="Swift">
                     </div>
@@ -84,7 +84,7 @@
                         <img
                              th:with=" img = ${assets_link + '/images/icons/Principle.png'}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}"
                              title="Principle">
                     </div>
@@ -94,7 +94,7 @@
                         <img
                              th:with=" img = ${assets_link + '/images/icons/illustrator.png'}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}"
                              title="illustrator">
                     </div>
@@ -102,7 +102,7 @@
                         <img
                              th:with=" img = ${assets_link + '/images/icons/CSS3.png'}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}"
                              title="CSS3">
                     </div>
@@ -112,7 +112,7 @@
                         <img
                              th:with=" img = ${assets_link + '/images/icons/JS.png'}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}"
                              title="JS">
                     </div>
@@ -120,7 +120,7 @@
                         <img
                              th:with=" img = ${assets_link + '/images/icons/HTML.png'}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}"
                              title="HTML">
                     </div>
@@ -130,7 +130,7 @@
                         <img
                              th:with=" img = ${assets_link + '/images/icons/Git.webp'}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}"
                              title="Git">
                     </div>
@@ -138,7 +138,7 @@
                         <img
                              th:with=" img = ${assets_link + '/images/icons/Apifox.webp'}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}"
                              title="Apifox">
                     </div>
@@ -148,7 +148,7 @@
                         <img
                              th:with=" img = ${assets_link + '/images/icons/AfterEffect.png'}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}"
                              title="AfterEffect">
                     </div>
@@ -156,7 +156,7 @@
                         <img
                              th:with=" img = ${assets_link + '/images/icons/Sketch.png'}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}"
                              title="Sketch">
                     </div>
@@ -166,7 +166,7 @@
                         <img
                              th:with=" img = ${assets_link + '/images/icons/Docker.png'}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}"
                              title="Docker">
                     </div>
@@ -174,7 +174,7 @@
                         <img
                              th:with=" img = ${assets_link + '/images/icons/Photoshop.png'}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}"
                              title="Photoshop">
                     </div>
@@ -184,7 +184,7 @@
                         <img
                              th:with=" img = ${assets_link + '/images/icons/FinalCutPro.png'}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}"
                              title="FinalCutPro">
                     </div>
@@ -192,7 +192,7 @@
                         <img
                              th:with=" img = ${assets_link + '/images/icons/Python.png'}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}"
                              title="Python">
                     </div>
@@ -202,7 +202,7 @@
                         <img
                              th:with=" img = ${assets_link + '/images/icons/Swift.png'}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}"
                              title="Swift">
                     </div>
@@ -210,7 +210,7 @@
                         <img
                              th:with=" img = ${assets_link + '/images/icons/Principle.png'}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}"
                              title="Principle">
                     </div>
@@ -220,7 +220,7 @@
                         <img
                              th:with=" img = ${assets_link + '/images/icons/illustrator.png'}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}"
                              title="illustrator">
                     </div>
@@ -228,7 +228,7 @@
                         <img
                              th:with=" img = ${assets_link + '/images/icons/CSS3.png'}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}"
                              title="CSS3">
                     </div>
@@ -238,7 +238,7 @@
                         <img
                              th:with=" img = ${assets_link + '/images/icons/JS.png'}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}"
                              title="JS">
                     </div>
@@ -246,7 +246,7 @@
                         <img
                              th:with=" img = ${assets_link + '/images/icons/HTML.png'}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}"
                              title="HTML">
                     </div>
@@ -256,7 +256,7 @@
                         <img
                              th:with=" img = ${assets_link + '/images/icons/Git.webp'}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}"
                              title="Git">
                     </div>
@@ -264,7 +264,7 @@
                         <img
                              th:with=" img = ${assets_link + '/images/icons/Apifox.webp'}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:src="${isLazyload ? dataImage : img}"
+                             th:src="${isLazyload ? loadingImg : img}"
                              th:data-lazy-src="${ isLazyload ? img : ''}"
                              title="Apifox">
                     </div>
@@ -283,7 +283,7 @@
                             <img
                                     th:with=" img = @{${techOdd.url}}"
                                     th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                                    th:src="${isLazyload ? dataImage : img}"
+                                    th:src="${isLazyload ? loadingImg : img}"
                                     th:data-lazy-src="${ isLazyload ? img : ''}"
                                     th:title="${techOdd.name}">
                         </div>
@@ -294,7 +294,7 @@
                             <img
                                  th:with=" img = @{${techEven.url}}"
                                  th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                                 th:src="${isLazyload ? dataImage : img}"
+                                 th:src="${isLazyload ? loadingImg : img}"
                                  th:data-lazy-src="${ isLazyload ? img : ''}"
                                  th:title="${techEven.name}">
                         </div>
diff --git a/templates/modules/widgets/top-group.html b/templates/modules/widgets/top-group.html
index 862482c7..1b7c760f 100644
--- a/templates/modules/widgets/top-group.html
+++ b/templates/modules/widgets/top-group.html
@@ -17,7 +17,7 @@
                      th:with=' img = ${#strings.isEmpty(post.spec.cover) ? postRandomImg+","+post.spec.title : post.spec.cover}'
                      th:alt="${post.spec.title}"
                      th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                     th:src="${isLazyload ? dataImage : img}"
+                     th:src="${isLazyload ? loadingImg : img}"
                      th:data-lazy-src="${ isLazyload ? img : ''}"
 
                 />
@@ -44,7 +44,7 @@
                          th:with='img = ${#strings.isEmpty(post.spec.cover) ? postRandomImg+","+post.spec.title : post.spec.cover}'
                          th:alt="${post.spec.title}"
                          th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                         th:src="${isLazyload ? dataImage : img}"
+                         th:src="${isLazyload ? loadingImg : img}"
                          th:data-lazy-src="${ isLazyload ? img : ''}"
 
                     />
diff --git a/templates/moments.html b/templates/moments.html
index 6670d0b5..3bd88253 100644
--- a/templates/moments.html
+++ b/templates/moments.html
@@ -32,7 +32,7 @@
                                     <div class="bber-container-img" th:if="${#strings.contains(content.medium,'PHOTO')}">
                                         <img th:each="momentItem : ${content.medium}"
                                              th:if="${momentItem.type.name == 'PHOTO'}"
-                                             th:src="${isLazyload ? dataImage : momentItem.url}"
+                                             th:src="${isLazyload ? loadingImg : momentItem.url}"
                                              th:data-lazy-src="${ isLazyload ? momentItem.url : ''}"
                                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
                                              title="瞬间配图">
diff --git a/templates/post.html b/templates/post.html
index a13eedb2..f5ce8c5e 100644
--- a/templates/post.html
+++ b/templates/post.html
@@ -125,7 +125,7 @@
                         <a th:if="${postCursor.hasPrevious()}" th:href="@{${postCursor.previous.status.permalink}}">
                             <img alt="cover" id="preimg" class="nolazyload"
                                  th:with="img = ${#strings.isEmpty(postCursor.previous.spec.cover) ? theme.config.layout.postRandomImg : postCursor.previous.spec.cover}"
-                                 th:src="${isLazyload ? dataImage : img}"
+                                 th:src="${isLazyload ? loadingImg : img}"
                                  th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
                                  th:data-lazy-src="${ isLazyload ? img : ''}">
                             <div class="pagination-info">
@@ -138,7 +138,7 @@
                         <a th:if="${postCursor.hasNext()}" th:href="@{${postCursor.next.status.permalink}}">
                             <img alt="cover" id="preimg" class="nolazyload"
                                  th:with="img = ${#strings.isEmpty(postCursor.next.spec.cover) ? theme.config.layout.postRandomImg : postCursor.next.spec.cover}"
-                                 th:src="${isLazyload ? dataImage : img}"
+                                 th:src="${isLazyload ? loadingImg : img}"
                                  th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
                                  th:data-lazy-src="${ isLazyload ? img : ''}">
                             <div class="pagination-info">