feat: adicionado componente de imagem

src/components/card/card-background.tsx

@@ -1,4 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react'
+import { Img } from '../img'
 
 export type CardBackgroundProps = {
   children?: ReactNode,
@@ -9,7 +10,7 @@ export const CardBackground = ({ children, src, className, ...props }: CardBackg
   return (
     <>
       <div className="absolute w-full h-full top-0 left-0 z-0 overflow-hidden">
-        <img className='w-full h-full object-cover' src={src} />
+        <Img className='w-full h-full object-cover' src={src} />
       </div>
       {children && <div className={`relative -m-8 p-6 ${className}`} {...props}>{children}</div>}
     </>

src/components/img/index.tsx

@@ -0,0 +1,13 @@
+import { ImgHTMLAttributes, useEffect, useState } from 'react'
+
+type ImgProps = ImgHTMLAttributes<HTMLImageElement>
+
+export const Img = ({ src, ...props }: ImgProps) => {
+  const [localSrc, setLocalSrc] = useState<string>('')
+
+  useEffect(() => {
+    setLocalSrc(`${import.meta.env.VITE_BASE_APP ? import.meta.env.VITE_BASE_APP : '/'}${src}`)
+  }, [src])
+
+  return <img src={localSrc} {...props} />
+}

src/layouts/default/default.layout.tsx

@@ -7,6 +7,7 @@ import { Typography } from '../../components/Typography'
 import { Toggle } from '../../components/form/toggle'
 import { Outlet, useNavigate } from 'react-router-dom'
 import { RoutesConfig } from '@config/routes'
+import { Img } from '../../components/img'
 
 type DefaultLayoutProps = {
   title?: string
@@ -47,7 +48,7 @@ export const DefaultLayout = ({ title }: DefaultLayoutProps) => {
           <div className='m-6'>
 
             <a href="" className="flex items-center gap-3">
-              <Rounded><img src="/logo.png" width={50} height={50} /></Rounded>
+              <Rounded><Img src="/logo.png" width={50} height={50} /></Rounded>
               {' '}
               <span>Erik <span className='text-primary'>Dashboard</span></span>
             </a>