Oi Vanderson, tudo bem?
No React, especialmente quando você está utilizando o Create React App (CRA), os arquivos estáticos como imagens que estão na pasta public
podem ser acessados diretamente a partir da raiz do seu projeto. Por isso, ao invés de usar ../../../public/img/fb.png
, você pode simplesmente usar /img/fb.png
. Isso acontece porque o CRA serve os arquivos da pasta public
diretamente na raiz do servidor.
Por exemplo, se você tem uma imagem fb.png
na pasta public/img
, você pode acessá-la diretamente com /img/fb.png
no seu código JSX.
<img src="/img/fb.png" alt="Facebook" />
Essa abordagem é diferente do HTML e JavaScript tradicionais, onde você teria que especificar o caminho relativo completo. No React, ao usar o CRA, ele já entende que os arquivos na pasta public
estão disponíveis diretamente na raiz.
Sobre a diferença entre ../
e ./
:
./
refere-se ao diretório atual. Por exemplo, se você está em src/components
e quer acessar um arquivo na mesma pasta, você usaria ./arquivo.js
.../
sobe um nível na hierarquia de diretórios. Por exemplo, se você está em src/components
e quer acessar um arquivo em src
, você usaria ../arquivo.js
.
Um abraço e bons estudos.