Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

No video o BaseUrl está relativo a pasta src

Como o sistema sabe que o caminho será relativo a pasta public, sendo que foi definido explicitamente que seria relativo a src?

1 resposta
solução!

Oi Gabriel, tudo bem?

Desculpe a demora em retornar.

O sistema sabe que o caminho será relativo à pasta public por padrão. O React é construído com a premissa de que todos os arquivos estáticos (como imagens, fontes e arquivos CSS) devem ser armazenados na pasta public. A pasta public é o ponto de entrada para o aplicativo e é onde o arquivo HTML principal é armazenado. É possível definir um caminho relativo a partir da pasta src, mas o padrão é que o caminho seja relativo à pasta public.

Quando você define um caminho relativo a partir da pasta src, o React entende que esse caminho deve ser resolvido em tempo de execução e gerado em um arquivo de construção. Isso significa que, quando o aplicativo é construído, o Webpack (o pacote de construção padrão do React) irá resolver o caminho para o arquivo estático e copiá-lo para a pasta de construção.

Por exemplo, se você tem uma imagem em src/images/my-image.png e deseja usá-la em um componente, você pode definir o caminho relativo a partir da pasta src da seguinte maneira:

import React from 'react';
import myImage from '../images/my-image.png';

function MyComponent() {
  return (
    <div>
      <img src={myImage} alt="My Image" />
    </div>
  );
}

export default MyComponent;

Observe que o caminho para a imagem começa com ../, o que significa "volte um diretório". Isso porque a pasta src está um diretório acima da pasta images. O Webpack irá resolver esse caminho em tempo de execução e gerar o arquivo de construção, copiando a imagem para a pasta de construção.

Por outro lado, se você tem uma imagem na pasta public, você pode referenciá-la diretamente pelo caminho relativo a partir da raiz do aplicativo, sem precisar usar import:

import React from 'react';

function MyComponent() {
  return (
    <div>
      <img src="/images/my-image.png" alt="My Image" />
    </div>
  );
}

export default MyComponent;

Observe que o caminho para a imagem começa com /, o que significa "a partir da raiz do aplicativo". Isso porque a pasta public é a raiz do aplicativo e todas as imagens e outros arquivos estáticos devem ser referenciados a partir dela.

Espero que tenha te ajudado.

Um abraço e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software