Como colocar imagem no ReactJS

O ReactJS é uma biblioteca JavaScript popular para a construção de interfaces de usuário. Ao desenvolver aplicações com ReactJS, é comum precisar inserir imagens em componentes. Neste artigo, vamos explorar como colocar imagem no ReactJS utilizando tags HTML e JavaScript.

Usando a tag <img>

Uma maneira simples de inserir uma imagem em um componente ReactJS é utilizando a tag <img>. Você pode referenciar a URL da imagem no atributo src da tag <img>.

<img src="caminho/para/imagem.jpg" alt="Descrição da imagem" />
    

O exemplo acima mostra como usar a tag <img> para exibir a imagem “imagem.jpg” em um componente ReactJS. O atributo alt fornece uma descrição alternativa para a imagem, que é útil para acessibilidade e SEO.

Importando a imagem como um módulo

Além de referenciar a URL da imagem diretamente no atributo src da tag <img>, você também pode importar a imagem como um módulo JavaScript e utilizá-la dinamicamente no componente ReactJS.

import React from 'react';
import imagem from './caminho/para/imagem.jpg';

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

No exemplo acima, a imagem “imagem.jpg” é importada como um módulo JavaScript e é referenciada dinamicamente no atributo src da tag <img>.

Conclusão

Colocar imagem no ReactJS é uma tarefa simples, seja utilizando a tag <img> diretamente ou importando a imagem como um módulo JavaScript. Experimente estas abordagens em seus projetos ReactJS e escolha aquela que melhor se adapta às suas necessidades.