From 89cabda1236041b948292f90f559b26cb3b73090 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?dni=20=E2=9A=A1?= <office@dnilabs.com>
Date: Tue, 2 Dec 2025 12:23:00 +0100
Subject: [PATCH] feat: all <img> beeing lazyloaded (#3610)

---
 lnbits/templates/components.vue                      | 4 ++--
 lnbits/templates/components/admin/fiat_providers.vue | 4 ++--
 lnbits/templates/components/lnbits-header.vue        | 8 ++++----
 lnbits/templates/pages/home.vue                      | 4 ++--
 lnbits/templates/pages/wallet.vue                    | 6 +++---
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/lnbits/templates/components.vue b/lnbits/templates/components.vue
index f94e5d8e..3e5d363e 100644
--- a/lnbits/templates/components.vue
+++ b/lnbits/templates/components.vue
@@ -525,12 +525,12 @@ include('components/lnbits-wallet-extra.vue') %}
           <q-tooltip :model-value="href === '' ? value : href"></q-tooltip>
         </qrcode-vue>
       </a>
-      <img
+      <q-img
         :src="logo"
         class="qrcode__image"
         alt="qrcode icon"
         style="pointer-events: none"
-      />
+      ></q-img>
     </div>
     <div
       v-if="showButtons"
diff --git a/lnbits/templates/components/admin/fiat_providers.vue b/lnbits/templates/components/admin/fiat_providers.vue
index 873f99c2..7302d219 100644
--- a/lnbits/templates/components/admin/fiat_providers.vue
+++ b/lnbits/templates/components/admin/fiat_providers.vue
@@ -15,7 +15,7 @@
           <template v-slot:header>
             <q-item-section avatar>
               <q-avatar>
-                <img src="/static/images/stripe_logo.ico" />
+                <q-img src="/static/images/stripe_logo.ico"></q-img>
               </q-avatar>
             </q-item-section>
 
@@ -279,7 +279,7 @@
           <template v-slot:header>
             <q-item-section avatar>
               <q-avatar>
-                <img src="/static/images/square_logo.png" />
+                <q-img src="/static/images/square_logo.png"></q-img>
               </q-avatar>
             </q-item-section>
 
diff --git a/lnbits/templates/components/lnbits-header.vue b/lnbits/templates/components/lnbits-header.vue
index e2cd4c58..e13d1fd2 100644
--- a/lnbits/templates/components/lnbits-header.vue
+++ b/lnbits/templates/components/lnbits-header.vue
@@ -22,12 +22,12 @@
       ></q-btn>
       <q-toolbar-title>
         <q-btn flat no-caps dense size="lg" type="a" href="/">
-          <img
+          <q-img
             v-if="customLogoUrl"
             height="30px"
             alt="Logo"
             :src="customLogoUrl"
-          />
+          ></q-img>
           <span v-else-if="!titleIsLnbits"><strong>LN</strong>bits</span>
           <span v-else v-text="title"></span>
         </q-btn>
@@ -81,11 +81,11 @@
       >
         <template v-slot:label>
           <div>
-            <img
+            <q-img
               v-if="hasUserPicture"
               :src="userPictureUrl"
               style="max-width: 32px"
-            />
+            ></q-img>
             <q-icon v-else name="account_circle" />
           </div>
         </template>
diff --git a/lnbits/templates/pages/home.vue b/lnbits/templates/pages/home.vue
index 9208b9ca..048ce451 100644
--- a/lnbits/templates/pages/home.vue
+++ b/lnbits/templates/pages/home.vue
@@ -150,8 +150,8 @@
       class="flex justify-center q-col-gutter-sm q-mb-lg"
     >
       <a :href="ad[0]" class="col lnbits-ad" v-for="ad in g.ads">
-        <img class="full-width" v-if="$q.dark.isActive" :src="ad[1]" />
-        <img class="full-width" v-else :src="ad[2]" />
+        <q-img class="full-width" v-if="$q.dark.isActive" :src="ad[1]"></q-img>
+        <q-img class="full-width" v-else :src="ad[2]"></q-img>
       </a>
     </div>
     <lnbits-home-logos />
diff --git a/lnbits/templates/pages/wallet.vue b/lnbits/templates/pages/wallet.vue
index d743da25..00bb5e33 100644
--- a/lnbits/templates/pages/wallet.vue
+++ b/lnbits/templates/pages/wallet.vue
@@ -335,7 +335,7 @@
             >
               <q-item-section avatar>
                 <q-avatar square>
-                  <img src="/static/images/logos/lnbits.png" />
+                  <q-img src="/static/images/logos/lnbits.png"></q-img>
                 </q-avatar>
               </q-item-section>
               <q-item-section>
@@ -354,7 +354,7 @@
             >
               <q-item-section avatar>
                 <q-avatar>
-                  <img src="/static/images/stripe_logo.ico" />
+                  <q-img src="/static/images/stripe_logo.ico"></q-img>
                 </q-avatar>
               </q-item-section>
               <q-item-section>
@@ -687,7 +687,7 @@
               v-text="parse.lnurlpay.description"
             ></p>
             <p class="col-4 q-pl-md" v-if="parse.lnurlpay.image">
-              <q-img :src="parse.lnurlpay.image" />
+              <q-img :src="parse.lnurlpay.image"></q-img>
             </p>
           </div>
           <div class="row">