Como o sistema sabe que o caminho será relativo a pasta public, sendo que foi definido explicitamente que seria relativo a src?
Como o sistema sabe que o caminho será relativo a pasta public, sendo que foi definido explicitamente que seria relativo a src?
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.