diff --git a/packages/site/app/collectivites/[code]/[name]/CollectiviteHeader.tsx b/packages/site/app/collectivites/[code]/[name]/CollectiviteHeader.tsx index 2c14d50d486..8bf472ca41f 100644 --- a/packages/site/app/collectivites/[code]/[name]/CollectiviteHeader.tsx +++ b/packages/site/app/collectivites/[code]/[name]/CollectiviteHeader.tsx @@ -62,7 +62,7 @@ const CollectiviteHeader = ({ )} diff --git a/packages/site/app/outil-numerique/HeaderPlateforme.tsx b/packages/site/app/outil-numerique/HeaderPlateforme.tsx index ca8a45c165a..78cd3373668 100644 --- a/packages/site/app/outil-numerique/HeaderPlateforme.tsx +++ b/packages/site/app/outil-numerique/HeaderPlateforme.tsx @@ -61,17 +61,14 @@ const HeaderPlateforme = ({ )} -
- -
+ + ); }; diff --git a/packages/site/app/programme/Objectifs.tsx b/packages/site/app/programme/Objectifs.tsx index 9dde9464e68..4836a56f22e 100644 --- a/packages/site/app/programme/Objectifs.tsx +++ b/packages/site/app/programme/Objectifs.tsx @@ -27,9 +27,12 @@ const Objectifs = ({titre, description, contenu}: ObjectifsProps) => { textClassName="text-center small-text" image={ c.image ? ( -
- -
+ ) : undefined } /> diff --git a/packages/site/components/cards/BlogCard.tsx b/packages/site/components/cards/BlogCard.tsx index f35bd1be3f2..532feab4157 100644 --- a/packages/site/components/cards/BlogCard.tsx +++ b/packages/site/components/cards/BlogCard.tsx @@ -85,7 +85,7 @@ const BlogCard = ({ ) : ( pas d'image disponible { {!!thumbnail.image && ( )}
diff --git a/packages/site/components/strapiImage/StrapiImage.tsx b/packages/site/components/strapiImage/StrapiImage.tsx index 67962afbef9..b70dd790f70 100644 --- a/packages/site/components/strapiImage/StrapiImage.tsx +++ b/packages/site/components/strapiImage/StrapiImage.tsx @@ -2,14 +2,34 @@ /* eslint-disable @next/next/no-img-element */ import classNames from 'classnames'; -import {CSSProperties, useState} from 'react'; -import Image from 'next/image'; +import {CSSProperties, useEffect, useState} from 'react'; import {StrapiItem} from 'src/strapi/StrapiItem'; -const baseURL = process.env.NEXT_PUBLIC_STRAPI_URL; +const imagePlaceholder = '/placeholder.svg'; type Size = 'large' | 'medium' | 'small' | 'thumbnail'; +type Format = {[size: string]: {url: string}}; + +const addBaseURL = (url: string) => { + const baseURL = process.env.NEXT_PUBLIC_STRAPI_URL; + + if (url.startsWith('http')) return url; + if (url.startsWith('/')) return `${baseURL}${url}`; + return `${baseURL}/${url}`; +}; + +const getImageSrc = ( + size: Size | undefined, + formats: Format, + url: string | undefined, +) => { + if (url) { + const tempURL = size && formats?.size ? `${formats[size].url}` : url; + return addBaseURL(tempURL); + } else return imagePlaceholder; +}; + type StrapiImageProps = { data: StrapiItem; size?: Size; @@ -19,40 +39,52 @@ type StrapiImageProps = { displayCaption?: boolean; }; -export function StrapiImage({ +export const StrapiImage = ({ data, size, className, containerClassName, containerStyle, displayCaption = false, -}: StrapiImageProps) { - const [error, setError] = useState(false); - +}: StrapiImageProps) => { const attributes = data.attributes; - const url = - size && attributes.formats?.size - ? `${attributes.formats[size].url}` - : `${attributes.url}`; + const [src, setSrc] = useState(imagePlaceholder); + + const formats = Object.keys(attributes.formats ?? {}) + .map(srcKey => ({ + url: addBaseURL(`${attributes.formats[srcKey].url}`), + width: attributes.formats[srcKey].width as unknown as number, + })) + .sort((a, b) => a.width - b.width); + + useEffect(() => { + setSrc( + getImageSrc( + size, + attributes.formats as unknown as Format, + attributes.url as unknown as string, + ), + ); + }, [size, attributes]); - return !error ? ( + return (
- `${f.url} ${f.width}w`)},` : '' + } ${src} ${attributes.width}w`} alt={`${attributes.alternativeText ?? ''}`} - width={attributes.width as unknown as number} - height={attributes.height as unknown as number} - placeholder="blur" - blurDataURL="/blurImage.png" - onErrorCapture={() => setError(true)} + onError={() => setSrc(imagePlaceholder)} /> + {displayCaption && !!attributes.caption && (

{`${attributes.caption}`}

)}
- ) : null; -} + ); +}; diff --git a/packages/site/public/blurImage.png b/packages/site/public/blurImage.png deleted file mode 100644 index a7308fb29cd..00000000000 Binary files a/packages/site/public/blurImage.png and /dev/null differ diff --git a/packages/site/public/placeholder.png b/packages/site/public/placeholder.png deleted file mode 100644 index eb988e1f0e5..00000000000 Binary files a/packages/site/public/placeholder.png and /dev/null differ diff --git a/packages/site/public/placeholder.svg b/packages/site/public/placeholder.svg new file mode 100644 index 00000000000..3ab28e41ab4 --- /dev/null +++ b/packages/site/public/placeholder.svg @@ -0,0 +1 @@ + \ No newline at end of file