Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

202
Visualizações
React page cannot load image via JSON with relative file path

This is my first post so apologies if there is any vital info missing.

I am building a webpage with react. I'm trying to populate a page on my webpage by mapping over a relatively simple JSON file.

Everything is populating fine except for the image. I am trying to use relative file paths for the image source, but everything I have tried so far just results in a broken image icon.

So far I have tried troubleshooting by putting an image url from the internet in the JSON which works fine.

Here is my react code:

{Services.map((item) => {
            return (
              <Fragment>
                <li className="services-item">
                  <img
                    src={item.image}
                    className="services-item-img"
                  />
                  <div className="services-item-text">
                    <div className="h1">{item.title}</div>

                    <div className="p1">{item.paragraph}</div>
                  </div>
                </li>

                <div className="diamonds-container">
                  <img src={Diamonds} className="diamonds" />
                </div>
              </Fragment>
            );
          })}

and here is my JSON file:

    [
  {
    "title": "DESIGN & WEB",
    "paragraph": "Brand consistancy and agility are important, which is why we do it all in one place. We want to make this complex task as simple as possible for everyone we work with.",
    "image": "../images/pen.svg"
  },
  {
    "title": "MOTION DESIGN",
    "paragraph": "Our talent pool has a long history in the motion design world. From creating graphics for New Zealand's largest broadcast outlets, to animating content for hugely succesful YouTube channels across the globe.",
    "image": "../images/keyframe.svg"
  },
  {
    "title": "PHOTO & VIDEO",
    "paragraph": "Photography, film and video is a long term passion of ours. Every photography or video project that we have been a part of, takes with it a part of our heart and soul.",
    "image": "../images/video.svg"
  }
]

Here is a screenshot of my folder structure too if it's helpful: Project Folder Structure:

enter image description here

Thank you!

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

put the image folder inside the public folder and edit the image property like this "./images/video.svg"

Why this work

Because in the browser it is the public/index.html file that get rendered so you have to add image assets relative to the public folder

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda