Olá, boa noite. Estou querendo colocar o input do tipo arquivo, porem no card fica em branco, como devo fazer ?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Olá, boa noite. Estou querendo colocar o input do tipo arquivo, porem no card fica em branco, como devo fazer ?
Oi Renato, tudo bem?
Você está tentando usar um input do tipo arquivo para pegar uma imagem e exibir em um card, mas a imagem não está aparecendo, certo?
Para fazer isso no React, você pode criar um estado para armazenar o arquivo selecionado e então utilizar a URL criada para exibir a imagem. Veja o exemplo abaixo:
import React, { useState } from 'react';
function App() {
const [image, setImage] = useState('');
const handleImageChange = (event) => {
setImage(URL.createObjectURL(event.target.files[0]));
}
return (
<div className="App">
<input type="file" onChange={handleImageChange} />
<img src={image} alt="Imagem selecionada" />
</div>
);
}
export default App;
Neste exemplo, quando um arquivo é selecionado no input, a função handleImageChange é disparada. Essa função pega o arquivo selecionado (event.target.files[0]) e cria uma URL para ele usando URL.createObjectURL(). Essa URL é então armazenada no estado image e usada como o src da tag img.
Lembre-se de que essa é uma solução básica e pode não funcionar perfeitamente em todos os casos. Por exemplo, essa abordagem não funcionará se você precisar enviar a imagem para um servidor, pois a URL criada é apenas uma referência local ao arquivo.
Espero ter ajudado.
Um abraço e bons estudos.
Olá Lorena, tudo bem. Sim, era basicamente isso msm que eu estava precisando, funcionou para o teste que eu estava fazendo naquele momento. Obrigado!