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

Renderização de Imagem

por Vinícius de Matos
| 114.3k xp | 11 posts
Desenvolvedor

Olá, pessoal.

Estou tentando renderizar um card com nome e imagem utilizando react. Consigo passar a imagem e o nome conforme o código abaixo, porém gostaria que o endereço da imagem fosse montado de acordo com props. Da mesma forma que estou passando 'name', passaria outro para a imagem.

Hoje uso o componente assim:

<CardClientes name="Alura"/>

Gostaria de usar algo como isso:

<CardClientes name="Alura" img="nomeArquivoLogoDaAlura"/>

Tentei algumas formas de interpolação no src , mas não obtive sucesso. Alguma idéia para solucionar este problema?

Obrigado!

import React, { Component } from "react"
import "./style.css"
import img from "../../../img/nomeArquivoLogoDaAlura.png"

export class CardCliente extends Component{

  render(){

    return(
      <div className="cardclientes">
        <div className="cardclientes-logo-div">
          <img className="cardclientes-logo" src={img} alt=""/>
        </div>
        <h1 className="cardclientes-nome">{this.props.name}</h1>
        <p className="cardclientes-case">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor non sapien nec blandit. Suspendisse potenti. Nulla ultrices interdum neque a pellentesque. Praesent at faucibus tortor. </p>
      </div>
    )
}
}
3 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Vinicius, tudo bem? A forma como tu fez esta correta, precisa criar uma nova propriedade (no caso criou img). Ai você passa uma URL como valor do parâmetro img e usa ele para setar o src da imagem.

Esta dando qual erro por ai?

Espero ter ajudado.

por Vinícius de Matos
| 114.3k xp | 11 posts
Desenvolvedor

Olá Matheus, obrigado pela resposta.

A idéia inicial era passar apenas o nome do arquivo, sem a extensão, como parâmetro e montar a URL no componente. Mas fui tentar da forma que você sugeriu, passando a URL como parâmetro mesmo, mas também não funcionou. Devo passar da mesma forma que uso na importação ("../../../img/[...]) ou por ser parâmetro devo mudar algo?

Não retorna nenhum erro, a página carrega com todos os elementos corretamente, inclusive o card onde quero inserir a foto, só a foto que não aparece. No htlm da página o src aparece com a URL da imagem ("../../").

Atualmente o código está assim:

return(
  <div className="cardclientes">
    <div className="cardclientes-logo-div">
      <img className="cardclientes-logo" src={this.props.img} alt=""/>
    </div>
    <h1 className="cardclientes-nome">{this.props.name}</h1>
    <p className="cardclientes-case">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor non sapien nec blandit. Suspendisse potenti. Nulla ultrices interdum neque a pellentesque. Praesent at faucibus tortor. </p>
  </div>
)

} }

Chamo ele assim:

<CardCliente name="Lockheed Martin" img="../img/lhm.png"/>
solução!
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala Vinicius, tudo bem? O que você pode fazer é importar a imagem com import do ES Modules e passar o resultado para a prop, algo assim:

import nomeDaImagem from '../img/lhm.png'

<CardCliente name="Lockheed Martin" img={nomeDaImagem}/>

Caso não funcione nem via import, você pode tentar via endereço público dos assets, no caso do React poderia fazer algo assim:

<CardCliente name="Lockheed Martin" img={`${process.env.PUBLIC_URL}/img/lhm.png`}/>

Normalemte eu prefiro via import.

Espero ter ajudado.