fix image loading (svg / png) remove direct access v0.4.0

package.json

 {
     "name": "@onegeo-suite/gatsby-theme-onegeo",
-    "version": "0.3.0",
+    "version": "0.4.0",
     "main": "index.js",
     "types": "index.d.ts",
     "author": "NEOGEO",

src/components/Footer.tsx

@@ -15,23 +15,24 @@ const Footer = (props: Props) => {
                 site {
                     logo {
                         id
+                        imageFile {
+                            childImageSharp {
+                                gatsbyImageData
+                            }
+                            name
+                            publicURL
+                        }
                     }
                 }
             }
         }
     `)
 
-    const idLogo = dataDirectus.directus.site.logo?.id
-
+    const logo = dataDirectus.directus.site.logo?.imageFile
     return (
         <footer className={`footer bg-base-300 items-center px-4 ${className}`}>
             <div className="grid-flow-col items-center">
-                <Logo
-                    title=""
-                    image={`${process.env.DIRECTUS_URL}assets/${idLogo}`}
-                    url="/"
-                    className="w-10"
-                />
+                <Logo title="" image={logo} url="/" className="w-10" />
             </div>
             <div className="justify-self-center">
                 <Menu name="footer" className="menu menu-horizontal p-0" />

src/components/Header.tsx

@@ -21,6 +21,8 @@ const Header = (props: IHeader) => {
                             childImageSharp {
                                 gatsbyImageData
                             }
+                            name
+                            publicURL
                         }
                     }
                 }

src/components/News.tsx

@@ -39,6 +39,8 @@ const News = (props: INews) => {
                             childImageSharp {
                                 gatsbyImageData
                             }
+                            name
+                            publicURL
                         }
                     }
                 }

src/components/Partners.tsx

@@ -18,6 +18,13 @@ const Partners = (props: Props) => {
                     id
                     logo {
                         id
+                        imageFile {
+                            childImageSharp {
+                                gatsbyImageData
+                            }
+                            name
+                            publicURL
+                        }
                     }
                     name
                     url
@@ -28,7 +35,7 @@ const Partners = (props: Props) => {
 
     const partners = dataDirectus.directus.partners
     const dataImage = partners.map((partner: any) => {
-        return { src: `${process.env.DIRECTUS_URL}assets/${partner.logo.id}` }
+        return { src: partner.logo.imageFile }
     })
 
     return (

src/components/Section.tsx

@@ -70,6 +70,8 @@ const GRAPHQL_QUERY = graphql`
                                     childImageSharp {
                                         gatsbyImageData
                                     }
+                                    name
+                                    publicURL
                                 }
                                 id
                             }

src/components/Socials.tsx

@@ -19,6 +19,13 @@ const Socials = (props: ISocials) => {
                     id
                     logo {
                         id
+                        imageFile {
+                            childImageSharp {
+                                gatsbyImageData
+                            }
+                            name
+                            publicURL
+                        }
                     }
                 }
             }
@@ -41,7 +48,7 @@ const Socials = (props: ISocials) => {
                         key={key}
                     >
                         <Logo
-                            image={`${process.env.DIRECTUS_URL}assets/${item.logo.id}`}
+                            image={item.logo?.imageFile}
                             url={item.url}
                             className={"h-7 w-7"}
                         />

src/components/core/Image.tsx

@@ -34,15 +34,23 @@ const Image = (props: Iimage) => {
 
     const img = getImage(image)
     if (typeof img == "undefined") {
+        // SVG image
+        if (image.publicURL) {
+            return (
+                <img
+                    src={image.publicURL}
+                    alt={image.name}
+                    className={imageClassname}
+                />
+            )
+        }
+
         return imageNoAvailable
     }
 
+    // PNG image
     return (
-        <GatsbyImage
-            image={img}
-            alt="gatsby-image"
-            className={imageClassname}
-        />
+        <GatsbyImage image={img} alt={image.name} className={imageClassname} />
     )
 }
 

src/components/core/Marquee.tsx

@@ -18,6 +18,13 @@ const Marquee = () => {
                 partners {
                     logo {
                         id
+                        imageFile {
+                            childImageSharp {
+                                gatsbyImageData
+                            }
+                            name
+                            publicURL
+                        }
                     }
                 }
             }
@@ -64,7 +71,7 @@ const Marquee = () => {
                         <div className="slide-content flex w-20 justify-center">
                             <div className="user-image">
                                 <Logo
-                                    image={`${process.env.DIRECTUS_URL}assets/${item.logo.id}`}
+                                    image={item.logo.imageFile}
                                     url={url}
                                     className="user-photo w-16"
                                     title=""

src/pages-doc/doc/hero.tsx

@@ -24,6 +24,8 @@ function hero() {
                                         childImageSharp {
                                             gatsbyImageData
                                         }
+                                        name
+                                        publicURL
                                     }
                                 }
                             }

src/pages-doc/doc/news.tsx

@@ -45,6 +45,8 @@ GraphQL query
             childImageSharp {
               gatsbyImageData
             }
+            name
+            publicURL
           }
         }
       }

src/pages/news.tsx

@@ -91,6 +91,8 @@ export const query = graphql`
                         childImageSharp {
                             gatsbyImageData
                         }
+                        name
+                        publicURL
                     }
                 }
             }