Rendu conditionnel et chemin de l'image dans React JS

Question

Je ne comprends pas vraiment un instant. Disons que j'ai un composant qui restitue conditionnellement des données comme ceci:

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

L'image n'est pas rendue de cette façon, montre une icône de fichier cassée. Cependant, si j'importe la même image, cela fonctionne très bien:

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

J'utilise npm startet mon éditeur est VS Code. Savez-vous peut-être quelle est la raison de l'importer et pas simplement de fournir un nom de chemin srcmême si le chemin est le même? Le chemin que j'ai fourni et le nom du fichier étaient corrects à 100% dans le premier exemple.

Answer 1

Cela se produit parce que votre image n'est probablement pas dans le publicdossier.

Vous pouvez ajouter des actifs au dossier public et vous y aurez ensuite accès.

Par exemple, pour le code ci-dessous, vous aurez besoin d'un pathnamedossier avec le img.jpg dans le publicdossier.

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

Mais le meilleur moyen de le faire est d'utiliser l'importation dans des fichiers JavaScript. Ce mécanisme offre un certain nombre d'avantages:

• Les scripts et les feuilles de style sont réduits et regroupés pour éviter les demandes réseau supplémentaires.
• Les fichiers sont inclus dans le bundle
• Les fichiers manquants provoquent des erreurs de compilation au lieu d'erreurs 404 pour vos utilisateurs.
• Les noms de fichiers de résultat incluent des hachages de contenu, vous n'avez donc pas à vous soucier de la mise en cache de leurs anciennes versions par les navigateurs.

Avec import, lorsque la page est affichée, vous verrez sometinhg comme celui - ci dans l'image: src="/static/media/img.xxxxx.jpg". C'est parce que l'utilisation de l'importation indique à Webpack d'inclure ce fichier dans le bundle.

Vous pouvez en vérifier plus ici - en ajoutant-images-polices-et-fichiers et ici en utilisant-le-dossier-public

Answer 2

Vous manquez les accolades. Cela fonctionnera:

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