Como inserir uma imagem em React JS

Neste artigo você aprenderá a como inserir uma imagem em React JS, uma ação muito comum em projetos web!

Fala programador(a), beleza? Bora aprender mais sobre imagens em React JS!

React JS é uma biblioteca JavaScript para criar interfaces de usuário, e como tal, lidar com imagens e outros ativos de mídia é uma parte importante do processo de desenvolvimento.

Este artigo abordará várias maneiras de como você pode inserir uma imagem em um componente React JS, permitindo que você escolha a abordagem que melhor se adapta às suas necessidades.

Importando uma Imagem Local

A maneira mais comum de adicionar uma imagem a um componente React é importá-la como um módulo.

Com o Webpack ou similar empacotador de módulos que a maioria dos projetos React usa, podemos importar a imagem diretamente em nosso componente.

Aqui está um exemplo:

import React from 'react';
import minhaImagem from './minhaImagem.jpg';

const MeuComponente = () => {
    return (
        <div>
            <img src={minhaImagem} alt="Descrição da imagem" />
        </div>
    );
}

export default MeuComponente;

Neste exemplo, a imagem minhaImagem.jpg é importada do mesmo diretório que o arquivo do componente.

O caminho para a imagem é então passado para a propriedade src do elemento img. O Webpack se encarrega de incluir a imagem no pacote de saída e atualizar o caminho de acordo.

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 114 aulas
• 4 projetos
• 9h 18min

Conhecer formação

Usando uma URL da Imagem

Outra maneira de adicionar uma imagem é usar uma URL apontando para a imagem. Isso pode ser útil quando a imagem está hospedada em um servidor remoto ou em um CDN.

Veja como você pode fazer isso:

import React from 'react';

const MeuComponente = () => {
    const urlDaImagem = "https://meusite.com/minhaImagem.jpg";

    return (
        <div>
            <img src={urlDaImagem} alt="Descrição da imagem" />
        </div>
    );
}

export default MeuComponente;

Neste exemplo, simplesmente atribuímos a URL da imagem a uma variável e, em seguida, usamos essa variável para a propriedade src do elemento img.

Imagens de Fundo com CSS Inline

Além disso, você pode querer usar uma imagem como plano de fundo para um componente. Uma maneira de fazer isso é usar CSS inline em React.

Aqui está um exemplo:

import React from 'react';
import minhaImagem from './minhaImagem.jpg';

const MeuComponente = () => {
    const estilo = {
        backgroundImage: `url(${minhaImagem})`,
        backgroundSize: 'cover',
        height: '200px',
        width: '200px'
    };

    return <div style={estilo}></div>;
}

export default MeuComponente;

Neste exemplo, estamos usando a propriedade style do React para aplicar estilos CSS diretamente ao elemento div.

Estamos usando uma imagem de fundo, definindo-a para cobrir todo o div e definindo a altura e a largura do div.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Como você pode ver, existem várias maneiras de adicionar imagens a seus componentes React.

Você pode importar imagens diretamente, usar URLs de imagens ou até mesmo adicionar imagens de fundo com CSS inline.

A abordagem que você escolhe depende de suas necessidades específicas.

Com a flexibilidade que React JS oferece, você tem todas as ferramentas de que precisa para criar interfaces de usuário visualmente atraentes e funcionais.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.

Bloco novo ensinando o outro caminho clássico que quase todo mundo procura: colocar a imagem na pasta public e referenciar direto no src, sem import.

Se você conhece como um site estático serve arquivo, é bem parecido: o que tá em public fica acessível na raiz da aplicação

Assim você pode fazer algo como:

import React from ‘react’;

const MeuComponente = () => { return ( <div> <img src="/minhaImagem.jpg" alt="Descrição da imagem" /> </div> ); }

export default MeuComponente;

Repara que aqui não tem import, o arquivo mora dentro de public e o caminho começa na barra

Quando usar cada um? Import é bom pra imagem que faz parte do componente e você quer o empacotador otimizando

Já a pasta public cai bem pra imagem que não muda ou que você referencia por caminho fixo

Muita gente não quer uma imagem só, quer uma lista (galeria, cards, catálogo)

Pra isso você guarda os caminhos num array e roda um map, devolvendo um img pra cada item

Algo assim:

import React from ‘react’; import img1 from ‘./img1.jpg’; import img2 from ‘./img2.jpg’;

const MeuComponente = () => {

return ( <div> {imagens.map((imagem, index) => ( <img key={index} src={imagem} alt={Imagem ${index}} /> ))} </div> ); }

export default MeuComponente;

Repara no key, o React pede uma chave única pra cada item da lista

Com o array você pode vir de import, de URL ou até de uma resposta de API, a lógica é a mesma

Se você seguiu tudo e a imagem sumiu, calma, isso é clássico e quase sempre é o caminho

Antecipando os erros mais comuns:

Importou mas esqueceu de usar a variável no src (o certo é src={minhaImagem}, com as chaves, e não src="minhaImagem")

Errou o caminho relativo do import, o ./ aponta pra pasta do próprio componente, confira se a imagem tá mesmo ali

Colocou na pasta public mas escreveu o caminho como se fosse import, o de public começa com barra e vai direto no src como texto

Trocou a extensão, .jpg não é .png, o nome tem que bater exatinho, maiúscula e minúscula incluídas

Na dúvida, abra o console do navegador, o erro de imagem quebrada costuma gritar o caminho que ele tentou carregar