Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Imagem não aparece de forma dinâmica: background-image:

Referente ao curso React com Typescript: desenvolvendo uma área administrativa, no capítulo Construindo componentes e atividade Título

por Gilmar Xavier De Oliveira
| 63.3k xp | 1 posts
Analista TI

a imagem não estar aparecendo de forma dinâmica.

const SpanStyle = styled.span<Props>`
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 25px;
height: 25px;
background-image: ${props => props.imagem ? `url(${props.imagem})` : 'none'}
    
    function Titulo({ imagem, children }: Props) {

    const listaDeImagens: IImagens = {
        avaliacao: avaliacao,
        grafico: grafico,
        consulta: consulta
    }
        
    
    
    return (
        <ContainerStyle>
          {imagem &&  <SpanStyle imagem={listaDeImagens[imagem as keyof IImagens]} />}
            <TitleStyle>{children}</TitleStyle>
        </ContainerStyle>
    )
}
2 respostas
por NATHALIA QUEIROZ
| 1859.8k xp | 4434 posts
Alura Scuba Team Suporte Educacional

Oii, Gilmar! Tudo bem?

Peço desculpas pela demora em respondê-lo.

Observando o trecho do código que você colocou, ele está condizente ao que foi mostrado durante a aula. Como sugestão, recomendo verificar se o caminho da imagem está certinho. Observe, também, se está sendo importada no arquivo index.tsx do componente e se as imagens estão na pasta correta.

Outro detalhe que é importante se atentar, é verificar se as imagens estão aplicadas do jeito certo no componente <Titulo> no arquivo App.tsx

Se após fazer essas verificações, tudo estiver certinho e ainda sim não resolver o problema, peço por gentileza que enviei o link do Github contendo os arquivos completos. Dessa forma, conseguiremos te ajudar de maneira mais assertiva.

Espero que as sugestões seja um bom ponto de partida para a resolução.

Bons estudos, Gilmar!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
solução!
por Guilbert
| 70.9k xp | 20 posts

Boa noite, queria compartilhar que consegui resolver esse problema fazendo algumas alterações. Importante mencionar que o meu projeto tem umas diferenças leves, como isolar o estilo em um arquivo separado. No entanto, o restante segue bem parecido.

export const SpanStyled = styled.span<Props>`
    position: relative; 

&::before{
    content: '';
    width: 20px;
    height: 20px;
    background-size: auto;
    background-image: ${props => props.image ? `url(${props.image})` : 'none'};
    display:inline-block;
    vertical-align:middle;
    margin-right: 10px;
    background-repeat: no-repeat
}
`