Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

As fotos não aparecem

Bom dia, acho que o problema é o caminho da foto, pois todo o resto aparece no card, tentei botar o caminho "../../assets/imagens/galeria/foto-8.png", mas não resolveu.

Outra pergunta, para usar dados de um json é necessário usar stringfy nele? Em outro curso nós usamos essa função para utilizar as informações.

import React from 'react'
import Tags from '../Tags'
import styles from './Galeria.module.scss'
import fotos from './fotos.json'
import like from '../../assets/favorito.png'
import open from '../../assets/open.png'

function Galeria() {
  return (
    <section className={styles.galeria}>
        <h2>Navegue pela galeria</h2>
        <Tags/>
        <ul className={styles.galeria__cards}>
            {fotos.map(foto => {
                return(
                    <li key={foto.id} className={styles.galeria__card}>
                        <img className={styles.galeria__imagem} src={foto.imagem} alt={foto.titulo} />
                        <p className={styles.galeria__descricao}>{foto.titulo}</p>
                        <div>
                            <p>{foto.creditos}</p>
                            <span>
                                <img src={like} alt="Ícone de like" />
                                <img src={open} alt="Ícone de abrir" />
                            </span>
                        </div>
                    </li>
                )
            })}
        </ul>
    </section>
  )
}

export default Galeria
2 respostas

Olá João, tudo bem?

Pelo que entendi, o problema está no caminho da imagem. Uma sugestão é verificar se o caminho está correto e se a imagem está no local especificado. Uma dica é utilizar o caminho absoluto, começando a partir da raiz do projeto, por exemplo: "/src/assets/imagens/galeria/foto-8.png".

Quanto à sua segunda pergunta, a função stringify é utilizada para transformar um objeto JavaScript em uma string JSON. Se o arquivo fotos.json já estiver em formato JSON, não é necessário utilizar essa função.

Espero ter ajudado e bons estudos!

solução!

Descobri o problema, deve conter a pasta assets na pasta public também. Criei uma nova pasta assets em public e as imagens apareceram.