Fixing image loading.

components/CustomNextImage.js

@@ -30,7 +30,6 @@ const CustomStylesContainer = styled.div`
   }
 `;
 
-
 const CustomNextImage = (props) => {
   const { height, width, src, onLoad, ...other } = props;
   const [onLoadCount, setOnloadCount] = useState(0);
@@ -50,7 +49,7 @@ const CustomNextImage = (props) => {
           setOnloadCount((prev) => prev + 1);
           if (onLoad) onLoad(e);
         }}
-        src={imageUrl}
+        src={src}
         objectFit="cover"
         width={width}
         height={height}

pages/photos.js

@@ -1,7 +1,7 @@
 import Head from 'next/head';
 import { RiExternalLinkLine } from 'react-icons/ri';
 import styled from 'styled-components';
-import CustomNextCloudinaryImage from '../components/CustomNextCloudinaryImage';
+import CustomNextImage from '../components/CustomNextImage';
 import Layout from '../components/Layout';
 import useUser from '../lib/useUser';
 
@@ -88,14 +88,13 @@ export default function PhotosPage() {
           Link to full photo gallery <RiExternalLinkLine />
         </a>
         <PhotosStyles>
-          {photos.map((photo, index) => (
-            <CustomNextCloudinaryImage
-              key={index}
+          {photos.map((photo) => (
+            <CustomNextImage
+              key={photo.alt}
               src={photo.url}
               alt={photo.alt}
               height={1000}
               width={1000}
-              blur
             />
           ))}
         </PhotosStyles>

utils/db.js

@@ -20,7 +20,7 @@ async function connectDb() {
 
   // try {
   //   // Confirm connection
-  //   await client.db('waddle').command({ ping: 1 });
+  //   await client.db('weddinguser').command({ ping: 1 });
   //   console.log('🗄️ Connected to DB Success');
   // } catch (e) {
   //   console.error(e);