web-dev-qa-db-fra.com

HTML - sélectionne les images du dossier racine dans un sous-dossier

disons que voici la structure DIR de mon site Web DIR STRUCTURE

Maintenant, dans index.html je peux simplement renvoyer des images comme 

<img src="./images/logo.png">

mais que se passe-t-il si je veux faire référence à la même image fron sub.html que sera lesrc

57
Moon
<img src="../images/logo.png">
          __ ______ ________
          |    |       |
          |    |       |___ 3. Get the file named "logo.png"
          |    |
          |    |___ 2. Go inside "images/" subdirectory
          | 
          | 
          |____ 1. Go one level up
78
aularon

../images/logo.png vous fera reculer d'un dossier.

../../images/logo.png vous déplacera deux dossiers.

/images/logo.png vous ramènera au dossier racine peu importe où vous êtes /.

86
Moses

La référence relative serait

<img src="../images/logo.png">

Si vous connaissez l'emplacement par rapport à la racine du serveur, c'est peut-être l'approche la plus simple pour une application avec une hiérarchie de répertoires imbriquée complexe: ce serait la même pour tous les dossiers.

Par exemple, si votre arborescence de répertoires décrite dans votre question est relative à la racine du serveur, alors index.html et sub_folder/sub.html utiliseraient tous les deux:

<img src="/images/logo.png">

Si le dossier images se trouve plutôt à la racine d'une application telle que foo sous la racine du serveur (par exemple, http://www.example.com/foo), alors index.html (http://www.example.com/foo/index.html), par exemple, et sous_folder/sub.html (http://www.example.com/foo/sub_folder/sub.html), utilisent tous deux

<img src="/foo/images/logo.png">
9
Bert F

Votre index.html peut simplement faire src="images/logo.png" et à partir de sub.html vous feriez src="../images/logo.png"

3
Robusto

../ vous place dans un dossier de l’arborescence. Ensuite, sélectionnez le dossier approprié et son contenu.

../images/logo.png
0
Bopsi

lorsque vous téléchargez vos fichiers sur le serveur, faites attention, certaines images ne s'afficheront pas sur la page Web et une icône plantée s'affichera pour indiquer que le chemin d'accès au fichier n'est pas correctement organisé ou codé lorsque vous avez la structure de fichier suivante. être comme ceci Structure de fichier: -> web (dossier principal) -> images (sous-dossier) -> logo.png (image dans le sous-dossier) le code ci-dessus est conforme à cette norme 

 <img src="../images/logo.jpg" alt="image1" width="50px" height="50px">

si vous avez téléchargé vos fichiers sur le serveur Web en négligeant la structure de fichiers sans créer le dossier Web, si vous téléchargez directement les fichiers, vos images seront brisées, vous ne pourrez pas voir les images, puis modifiez le code comme suit:

 <img src="images/logo.jpg" alt="image1" width="50px" height="50px">

merci-> vamshi krishnan 

0
vamsikrish

lorsque vous téléchargez vos fichiers sur le serveur, faites attention, certaines images ne s'afficheront pas sur la page Web et une icône plantée s'affichera pour indiquer que le chemin d'accès au fichier n'est pas correctement organisé ou codé lorsque vous avez la structure de fichier suivante. être comme ceci Structure de fichier: -> web (dossier principal) -> images (sous-dossier) -> logo.png (image dans le sous-dossier) le code pour ce qui précède est ci-dessous suivre cette norme

<img src="../images/logo.jpg" alt="image1" width="50px" height="50px">

si vous avez chargé vos fichiers sur le serveur Web en négligeant la structure de fichiers sans créer le dossier Web, si vous téléchargez directement les fichiers, vos images seront brisées, vous ne pourrez pas voir les images, puis modifiez le code comme suit

<img src="images/logo.jpg" alt="image1" width="50px" height="50px">

merci-> vamshi krishnan

0