Rendering condizionale e percorso dell'immagine in React JS

Question

Non capisco davvero un momento. Diciamo che ho un componente che riproduce in modo condizionale i dati in questo modo:

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

L'immagine non viene renderizzata in questo modo, mostra un'icona di file rotto. Tuttavia, se importa la stessa immagine funziona bene:

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

Io uso npm starte il mio editor è VS Code. Sai che potrebbe essere il motivo per importarlo e non semplicemente fornire un nome di percorso srcanche se il percorso è lo stesso? Il percorso che ho fornito e il nome del file erano corretti al 100% nel primo esempio.

Answer 1

Ciò accade perché la tua immagine probabilmente non è all'interno della publiccartella.

Puoi aggiungere risorse alla cartella pubblica e quindi avrai accesso ad essa.

es. Per il codice sottostante, avrai bisogno di una pathnamecartella con img.jpg all'interno della publiccartella.

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

Ma il modo migliore per farlo è utilizzare l'importazione nei file JavaScript. Questo meccanismo offre una serie di vantaggi:

• Script e fogli di stile vengono minimizzati e raggruppati insieme per evitare richieste di rete aggiuntive.
• I file sono inclusi nel bundle
• I file mancanti causano errori di compilazione invece di errori 404 per i tuoi utenti.
• I nomi dei file dei risultati includono gli hash dei contenuti, quindi non devi preoccuparti che i browser memorizzino nella cache le loro vecchie versioni.

Con import, quando la pagina viene visualizzata, si vedrà come questo sometinhg nell'immagine: src="/static/media/img.xxxxx.jpg". Questo perché l'uso di import dice a webpack di includere quel file nel bundle.

Puoi controllare di più qui - aggiungendo-immagini-caratteri-e-file e qui usando-la-cartella-pubblica

Answer 2

Ti mancano le parentesi graffe. Questo funzionerà:

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