Optimize lekte component

components/teks/lekte.js

@@ -137,6 +137,14 @@ export default function Lekte({audio, url, parole}) {
     audioRef.current.volume = value / 100
   }
 
+  const imagePath = parole?.couverture?.data?.attributes?.formats?.thumbnail?.url
+  const width = parole?.couverture?.data?.attributes?.formats?.thumbnail?.width || 192
+  const height = parole?.couverture?.data?.attributes?.formats?.thumbnail?.height || 192
+
+  const imageSrc = imagePath
+    ? new URL(imagePath, IMAGE_URL).toString()
+    : '/logo-192x192.png'
+
   return (
     <Box sx={{width: '80%', position: 'relative', zIndex: 0}}>
       <Widget>
@@ -144,9 +152,9 @@ export default function Lekte({audio, url, parole}) {
           <CoverImage>
             <Image
               alt={parole.titre}
-              src={parole?.couverture?.data?.attributes?.formats?.thumbnail ? `${IMAGE_URL}${parole.couverture.data.attributes.formats.thumbnail.url}` : '/logo-192x192.png'}
+              src={imageSrc}
-              width={parole?.couverture?.data?.attributes?.formats?.thumbnail ? parole.couverture.data.attributes.formats.thumbnail.width : 192}
+              width={width}
-              height={parole?.couverture?.data?.attributes?.formats?.thumbnail ? parole.couverture.data.attributes.formats.thumbnail.height : 192}
+              height={height}
             />
           </CoverImage>
           <Box sx={{ml: 1.5, minWidth: 0}}>