1
resposta

Imagem de fundo do título sobre mim não renderiza.

Olá, já tentei por diversas vezes fazer aimagem de fundo aparecer na pagina, revisei o código, mas não encontrei erros de digitação ou algo do tipo. Alguém pode me ajudar?

Código da página sobre mim:

import styles from "./sobreMim.module.css";

import PostModelo from "componentes/postModelo";
import fotoCapa from "assets/sobre_mim_capa.png";
import fotoSobreMim from "assets/sobre_mim_foto.png";

export default function SobreMim() {
    return(
        <PostModelo
            fotoCapa={fotoCapa}
            titulo = "Sobre mim"
        >

            <h3 className={styles.subtitulo}>
            Olá, eu sou o Jefter!
            </h3>

            <img
                src={fotoSobreMim}
                alt="Foto sorrindo!"
                clasName={styles.fotoSobreMim}
            />

            <p className={styles.paragrafo}>
                Oi, tudo bem? Eu sou instrutor de Front-end na Alura e estou feliz de te ver por aqui.
            </p>
            <p className={styles.paragrafo}>
                Minha história com programação começou no Instituto Federal do Piauí (IFPI), quando fiz o ensino médio integrado ao curso de Informática. Eu aprendi lógica de programação e o básico de várias linguagens, como PHP, Python, Java, mas sem aprofundar muito em cada uma delas. Eu gostava muito de estudar programação, mas na época não fazia ideia de que trabalharia com isso hoje.
            </p>
            <p className={styles.paragrafo}>
                No ensino superior, escolhi cursar Engenharia Elétrica na Universidade Federal do Piauí (UFPI). Lá eu consegui entrar no PET (Programa de Educação Tutorial), um grupo acadêmico que contribui de diversas formas para o curso. Lá eu tive a oportunidade de estudar desenvolvimento web para ser um dos mantenedores do site deles.
            </p>
            <p className={styles.paragrafo}>
                Com isso tive minha experiência de dev mais próxima da realidade, com prazos de implementação para o site, e aprendi muito enquanto codificava.
            </p>
            <p className={styles.paragrafo}>
                E foi enquanto eu estava no PET que decidi procurar um estágio em desenvolvimento web. Eu encontrei uma vaga na Alura para o Scuba Team e percebi que ela aliava duas paixões minhas: programação e educação. Para minha felicidade, fui escolhido para fazer parte do time.
            </p>
            <p className={styles.paragrafo}>
                Desde então, tem sido aprenas aprendizados atrás de aprendizados. A Alura é uma escola não só para seus alunos e alunas, mas também para os colaboradores e colaboradoras. Hoje sou muito feliz de ter a oportunidade de trazer esses conteúdos ricos e encantadores para você. Espero que aprenda bastante!
            </p>

        </PostModelo>
    )
}

Código do postModelo:

import styles from "./postModelo.module.css";

export default function PostModelo({ children, fotoCapa, titulo }) {
    return(
        <article className={styles.postModeloContainer}>
            <div 
                className={styles.fotoCapa}
                style={{ backgroudImage: `url(${fotoCapa})` }}
            ></div>

            <h2 className={styles.titulo}>
                {titulo}
            </h2>

            <div className={styles.postConteudoContainer}>
                {children}
            </div>
        </article>
    )
}
1 resposta

Oii Jefter, tudo bem?

Observando o código que você enviou, há um pequeno erro de digitação. No seu componente PostModelo, você tentou definir a imagem de fundo com a propriedade 'backgroudImage', mas o correto é 'backgroundImage', perceba que adicionei o N faltante.

import styles from "./postModelo.module.css";

export default function PostModelo({ children, fotoCapa, titulo }) {
    return(
        <article className={styles.postModeloContainer}>
            <div 
                className={styles.fotoCapa}
                style={{ backgroundImage: `url(${fotoCapa})` }}
            ></div>

            <h2 className={styles.titulo}>
                {titulo}
            </h2>

            <div className={styles.postConteudoContainer}>
                {children}
            </div>
        </article>
    )
}

Fazendo essa correção a imagem de fundo deve aparecer.

Um abraço e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software