BradNut/weddingsite
1
0
Fork 0
mirror of https://github.com/BradNut/weddingsite synced 2025-09-08 17:40:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixing image loading.

Browse source
This commit is contained in:
Bradley Shellnut 2021-06-03 18:05:40 -07:00
parent 38bf62d5dc
commit e8dad766f5
3 changed files with 6 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
components/CustomNextImage.js
View file

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

9
pages/photos.js
View file

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

2
utils/db.js
View file

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