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

Import do Banner causa Compile with problems no navegador

Referente ao curso React: desenvolvendo com JavaScript

por Hary Ervin Bernhardt
| 24.3k xp | 2 posts

Ao tentar importar o Banner.png, meu código apresenta o seguinte erros no navegador:

![](Aplicativo aberto no Brave )

Meu código:

import logo from './logo.svg';
import './App.css';
import Banner from './componentes/Banner/Banner';

function App() {
  return (
    <div className="App">
      <Banner />
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

código do banner:

import './Banner.css'

function Banner() {
    return(
        <header className='banner'>
        <img src='public/imagens/banner.png' alt='banner' />
        </header>
    )
}

export default Banner()
2 respostas
por Vanessa Cristiane Ribeiro
| 216k xp | 141 posts
Analista de Desenvolvimento Front-End

É que para usar uma imagem dentro no React, você precisa importar ela, assim faz com outros componentes e funções:

import imagem from './minhas-imagens/imagem-escolhida.png';
import './Banner.css';

Aí no elemento imagem, você chama ela assim:

<img src={imagem} alt='banner' />

Seu código componente completo, ficaria assim:

import imagem from './minhas-imagens/imagem-escolhida.png';
import './Banner.css';

function Banner() {
    return(
        <header className='banner'>
        <img src={imagem} alt='banner' />
        </header>
    );
}

export default Banner();

Links úteis:

  1. Stack Overflow - Como inserir imagem usando react.js
  2. Medium - React js how to add an image — a beginners guide
solução!
por Hary Ervin Bernhardt
| 24.3k xp | 2 posts

Consegui resolver!

Já havia tentado a solução que você mandou, Vanessa. Também não funcionou. Eu não estava conseguindo importar nada de fora da src, então como a imagem estava no public, não estava funcionando. Tive que mover a imagem para o src.