Renderização condicional e caminho da imagem no React JS

Question

Eu realmente não entendo um momento. Digamos que eu tenha um componente que renderiza dados condicionalmente como este:

<div>
{isLoading ? <img src="../pathname/img.jpg" alt="loading" /> : <Page />}
</div>

A imagem não é renderizada dessa maneira, mostra um ícone de arquivo quebrado. No entanto, se eu importar a mesma imagem, funcionará perfeitamente:

import loadingImage from "../pathname/img.jpg"
<div>
{isLoading ? <img src={loadingImage} alt="loading" /> : <Page />}
</div>

Eu uso npm starte meu editor é o VS Code. Você sabe qual é o motivo para importá-lo e não apenas fornecer um nome de caminho srcmesmo que o caminho seja o mesmo? O caminho que forneci e o nome do arquivo estavam 100% corretos no primeiro exemplo.

Answer 1

Isso acontece porque sua imagem provavelmente não está dentro da publicpasta.

Você pode adicionar ativos à pasta pública e, em seguida, terá acesso a ela.

por exemplo, para o código abaixo, você precisará de uma pathnamepasta com o img.jpg dentro da publicpasta.

<img src="../pathname/img.jpg" alt="loading" />

Mas a melhor maneira de fazer isso é usando a importação de arquivos JavaScript. Este mecanismo oferece uma série de benefícios:

• Scripts e folhas de estilo são minimizados e agrupados para evitar solicitações extras de rede.
• Os arquivos estão incluídos no pacote
• Arquivos ausentes causam erros de compilação em vez de erros 404 para seus usuários.
• Os nomes dos arquivos de resultado incluem hashes de conteúdo, então você não precisa se preocupar com os navegadores armazenando em cache suas versões antigas.

Com import, quando a página é processada, você verá sometinhg como esta na imagem: src="/static/media/img.xxxxx.jpg". Isso porque o uso de importação informa ao webpack para incluir esse arquivo no pacote.

Você pode verificar mais aqui - como adicionar imagens-fontes-e-arquivos e aqui usando-a-pasta-pública

Answer 2

Você sente falta das chaves. Isso vai funcionar:

<div>
  {isLoading ? <img src={'../pathname/img.jpg'} alt='loading' /> : <Page />}
</div>