Introdução
Ao desenvolver aplicações web com React, normalmente queremos incluir elementos visuais para capturar o interesse dos usuários. Esses elementos visuais podem ser qualquer tipo de imagem, incluindo JPGs, PNGs, SVGs, GIFs e muitos outros.
Neste artigo, aprenderemos como importar imagens com React e veremos as várias maneiras de conseguir isso.
Imagens externas e imagens locais são os dois tipos de imagens que queremos usar em nosso aplicativo React. Estamos preocupados principalmente com imagens locais neste artigo porque as imagens externas não exigem que as importemos.
Imagens externas são imagens que já foram hospedadas externamente e podem ser acessadas por qualquer pessoa através de uma URL, enquanto imagens locais são imagens que estão disponíveis apenas para nós em nosso computador local ou pasta do projeto e que queremos usar em nosso aplicativo.
Como exibir imagens hospedadas externamente
Antes de entrarmos em como importar imagens, é importante entender que imagens hospedadas em outros lugares funcionam da mesma forma que sempre usamos imagens em HTML - adicionando o URL ao src atributo do img etiqueta, rótulo, palavra-chave:
const App = () => {
return (
<div>
<img src="https://reactjs.org/logo-og.png" alt="React Logo" />
</div>
);
};
Vamos agora aprender como podemos importar imagens (locais) com React!
Como importar imagens com React
Além das imagens externas, a forma como as imagens são usadas no React difere significativamente de outros frameworks ou mesmo HTML. Essas imagens devem primeiro ser importadas para o React antes de serem usadas em nosso aplicativo.
Isso pode ser feito de duas maneiras: usando o import declaração ou usando o require() função. Analisaremos ambas as abordagens.
Como importar imagens com o React usando o importar Declaração
Por ser mais fácil de ler e entender, o import é o método mais comumente usado para importar imagens armazenadas localmente no React. As imagens são tratadas como exportações padrão, e quando os importamos, fazemos isso da mesma maneira que importamos componentes. Isso é feito especificando o caminho relativo do arquivo para a imagem que estamos importando:
import Logo from './images/react-logo.png';
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
No código acima, ainda usamos o img tag e src atributo, mas desta vez o src O atributo recebe uma variável em vez de uma string, que é passada usando chaves em JSX.
Observação: Podemos importar quantas imagens quisermos, mas cada imagem deve ter um nome exclusivo na instrução de importação, caso contrário, ocorrerá um erro.
É importante entender como especificar e obter caminhos relativos para arquivos; caso contrário, bugs e erros podem ocorrer. No exemplo anterior, a imagem foi salva em um /src/images.
Como importar imagens com o React usando a função require()
A require() function é uma função do Node.js que é usada para incluir módulos externos de arquivos diferentes do arquivo atual. Funciona da mesma forma que o import declaração e nos permite incluir imagens:
let Logo = require('./images/react-logo.png');
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
A única diferença é a primeira linha em que solicitamos a imagem por meio de seu caminho relativo e a armazenamos em uma variável que acessamos no img tag através de chaves.
Também podemos decidir fazer isso inline e evitar a linha extra usada para atribuir a imagem a uma variável, pois não é obrigatório:
const App = () => {
return (
<div>
<img src={require('./images/react-logo.png')} alt="React Logo" />
</div>
);
};
Conclusão
Aprendemos como importar imagens locais usando o import declaração e o require() função neste artigo.
