Foto não encontrada

Boa tarde,

as fotos não estão aparecendo no navegador. o console está dando um erro com essa mensagem " foto-1.png:1 GET http://localhost:5173/imagens/galeria/foto-1.png 404 (Not Found) "

fotos.json/src
[
    {
      "titulo": "Grande Nuvem de Magalhães",
      "fonte": "Alura Space",
      "path": "/imagens/galeria/foto-1.png",
      "id": "1",
      "tagId": 2
    },
    {
      "titulo": "Via Láctea",
      "fonte": "Alura Space",
      "path": "/imagens/galeria/foto-2.png",
      "id": "2",
      "tagId": 2
    },
    {
      "titulo": "Lua: quarto minguante",
      "fonte": "Alura Space",
      "path": "/imagens/galeria/foto-3.png",
      "id": "3",
      "tagId": 3
    }, 
    ...
  ]
  index.jsx/Imagem/Galeria
 
import { styled } from "styled-components";
import BotaoIcone from "../../BotaoIcone";


const Figure = styled.figure`
   width: ${props => props.expandida ? '90%' : '460px'};
   max-width: 100%;
   margin: 0;
   display: flex;
   flex-direction: column;
   & > img{
    max-width: 100%;
    border-radius: 20px 20px 0 0;
   }
   figcaption{
    background-color: #001634;
    border-radius: 0px 0px 20px 20px;
    color: white;
    box-sizing: border-box;
    padding: 12px;
    h4{
        flex-grow: 1;
    }
    h3, h4{
        margin: 0;
        font-size: 16px;
    }
   }
`

const Rodape = styled.footer`
    display: flex;
    justify-content: space-between;
    align-items: center;
`

const Imagem = ({ foto, expandida = false }) => {
    return(
        <Figure $expandida={expandida} id={`foto-${foto.id}`}>
            <img src={foto.path} alt={foto.alt} />
            <figcaption>
                <h3> {foto.titulo}</h3>
                <Rodape>
                    <h4>{foto.fonte}</h4>
                    <BotaoIcone>
                        <img src="/icones/favorito.png" alt="Icone de favorito"/>
                    </BotaoIcone>
                     {!expandida && <BotaoIcone aria-hidden={expandida}>
                        <img src="/icones/expandir.png" alt="Icone de expandi"/>
                    </BotaoIcone>}
                </Rodape>
            </figcaption>
        </Figure>)
}

export default Imagem

index.jsx/galeria

import { styled } from "styled-components";
import Titulo from "../Titulo";
import Tags from "./Tags";
import Populares from "./Populares";
import Imagem from "./Imagem";

const GaleriaContainer = styled.div`
    display: flex;
`

const SecaoFluida = styled.section`
    flex-grow: 1;
`

const ImagemContainer = styled.section`
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
`

const Galeria = ({ fotos = [] }) => {
    return(
       <>
            <Tags />
            <GaleriaContainer>
                <SecaoFluida>
                    <Titulo>Navegue pela galeria</Titulo>
                    <ImagemContainer>
                        {fotos.map(( foto => <Imagem
                            key={foto.id} 
                            foto={foto} />)
                        )}
                    </ImagemContainer>
                </SecaoFluida>
                 <Populares />
            </GaleriaContainer>
       </>
    )
}

export default Galeria

App.jsx/src

import EstilosGlobais from "./componentes/EstilosGlobais";
import Cabecalho from "./componentes/Cabecalho";
import BarraLateral from "./componentes/BarraLateral";
import Banner from "./componentes/Banner";
import bannerBackground from './assets/banner.png';
import { styled } from "styled-components";
import Galeria from "./componentes/Galeria";

import fotos from "./fotos.json";
import { useState } from "react";


const FundoGradiente = styled.div`
  background: linear-gradient(174.61deg, #041833 4.16%, #04244F 48%, #154580 96.76%);
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
`

const AppContainer = styled.div`
  width: 1300px;//era 1440px
  margin: 0 auto;
  max-width:100%;
`

const MainContainer = styled.main`
  display: flex;
  gap: 24px;
`

const ConteudoGaleria = styled.section`
  display: flex;
  flex-direction: column;
  flex-grow: 1;
`

const App = () => {
  const [fotosDaGaleria, setFotosDaGaleria] = useState(fotos)
  return (
      <FundoGradiente>
        <EstilosGlobais />
        <AppContainer>   
          <Cabecalho />
          <MainContainer>
            <BarraLateral />
            <ConteudoGaleria>
              <Banner 
                texto={"A galeria mais completa de fotos do espaço!"}
                backgroundImage={bannerBackground}
              />
              <Galeria fotos={fotosDaGaleria}/>
            </ConteudoGaleria>
          </MainContainer>
        </AppContainer>
      </FundoGradiente>
  )
}

export default App