Add next.js blur image placeholders (#42)

asibs · Mar 3, 2024 · 0d6bfe0 · 0d6bfe0
1 parent 5316ad0
commit 0d6bfe0
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 0 deletions.
diff --git a/components/footer/Footer.tsx b/components/footer/Footer.tsx
@@ -77,6 +77,7 @@ const Footer = ({ blok }: { blok: FooterStoryblok }) => (
               src={mvmtFrwdQrCode}
               alt="Movement Forward QR Code"
               style={{ width: "100%", height: "auto" }}
+              placeholder="blur"
             />
           </a>
         </Col>
@@ -89,6 +90,7 @@ const Footer = ({ blok }: { blok: FooterStoryblok }) => (
                 src={mvmtFrwdLogo}
                 alt="Movement Forward Logo"
                 style={{ width: "4rem", height: "4rem" }}
+                placeholder="blur"
               />
               <span className="mx-2 fw-bold">@MVTFWD</span>
             </a>

diff --git a/components/navigation/Navigation.tsx b/components/navigation/Navigation.tsx
@@ -29,6 +29,7 @@ const Navigation = ({ blok }: { blok: NavbarStoryblok }) => {
             alt="StopTheTories.vote logo"
             className="d-inline-block me-2"
             style={{ width: "2rem", height: "2rem" }}
+            placeholder="blur"
           />
           <span>StopTheTories</span>
           <span className="fw-bolder fst-italic">.Vote</span>

diff --git a/components/sections/MovementSection.tsx b/components/sections/MovementSection.tsx
@@ -62,6 +62,7 @@ const MovementSection = () => {
                   src={image}
                   alt={`Photo of ${name}`}
                   style={{ width: "100%", height: "100%" }}
+                  placeholder="blur"
                 />
               </Col>
             );