minha imagen nao aparece

Salve, Peterson!

consegue compartilhar o seu código pra gente tentar entender o que aconteceu juntos? ;)

Comigo acontecou a mesma coisa.

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;

...

Erro no arquivo Banner.js:

Failed to compile.

SyntaxError: /home/eduardo/projeto-react/organo/src/componentes/Banner/Banner.js: Unexpected token (3:2)
  1 | function Banner() {
  2 |   return{
> 3 |           <img src="/imagens/banner.png" alt="O banner principal da página do Organo">
    |           ^
  4 |   }
  5 | }
  6 |
    at parser.next (<anonymous>)
ERROR in ./src/componentes/Banner/Banner.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/eduardo/projeto-react/organo/src/componentes/Banner/Banner.js: Unexpected token (3:2)

  1 | function Banner() {
  2 |   return{
> 3 |           <img src="/imagens/banner.png" alt="O banner principal da página do Organo">
    |           ^
  4 |   }
  5 | }
  6 |
    at instantiate (/home/eduardo/projeto-react/organo/node_modules/@babel/parser/lib/index.js:653:32)
    at constructor (/home/eduardo/projeto-react/organo/node_modules/@babel/parser/lib/index.js:947:12)
    at FlowParserMixin.raise (/home/eduardo/projeto-react/organo/node_modules/@babel/parser/lib/index.js:3271:19)
    ...



ERROR in [eslint] 
src/componentes/Banner/Banner.js
  Line 3:2:  Parsing error: Unexpected token (3:2)

webpack compiled with 2 errors

Oi Eduardo.

Nas linhas 2 e 4 mencionadas no erro, o return está utilizando chaves para "abraçar" o conteúdo, o correto seria parênteses. Tente alterar, acredito que seja este o erro de sintaxe.

Salve, Eduardo!

O seu log de erro nos ajuda a entender o que acontece, vamos analisar:

SyntaxError: /home/eduardo/projeto-react/organo/src/componentes/Banner/Banner.js: Unexpected token (3:2)
   1 | function Banner() {
   2 |   return{
> 3 |           <img src="/imagens/banner.png" alt="O banner principal da página do Organo">
      |           ^
   4 |   }
   5 | }

O problema aqui é que o retorno do JSX não pode estar entre chaves. Por isso ele diz que o erro é Unexpected token. Pra corrigir isso, colocamos o retorno entre parenteses. Assim:

import './Banner.css'

export const Banner = () => {
    return ( // repara que não é { e sim (
        <header className="banner">
            <img src="/imagens/banner.png" alt="O banner principal da página do Organo"/>
        </header>
    ) // repara que não é } e sim )
}

Bem como o Alexandre indicou :)

Na maioria dos casos, se você retornar apenas uma linha de código em um componente, não precisa usar parênteses para envolver o valor retornado. Por exemplo:

function MeuComponente() {
  return <h1>Título</h1>;
}

No entanto, se o valor de retorno do componente ocupar mais de uma linha, é necessário usar parênteses para envolver as linhas de código. Isso é necessário porque o JavaScript exige que os valores de retorno sejam expressões únicas. Os parênteses são usados para agrupar as várias linhas de código em uma única expressão.

Por exemplo:

function MeuComponente() {
  return (
    <div>
      <h1>Título</h1>
      <p>Conteúdo</p>
    </div>
  );
}

Sim, eu não tinha visto esse erro. Mas, eram dois rsrs. O outro era a barrinha no fechamento da tag img.

function Banner() {
    return (
        <img src="/imagens/banner.png" alt="O banner principal da página do Organo"/>
    );
}

export default Banner

Agora funcionou. Obrigado!