Comment référencer le chemin de l'image locale en HTML

Comment référencer le chemin de l'image locale en HTML : 1. Utilisez le chemin relatif. Si l'image et le fichier HTML se trouvent dans le même dossier, vous pouvez utiliser directement le nom de fichier de l'image comme chemin relatif. . Vous pouvez utiliser un chemin absolu pour référencer des images locales, mais ce n'est généralement pas une bonne pratique car les chemins absolus peuvent causer des problèmes dans différents environnements. 3. Utiliser le codage Base64 est une méthode de conversion des images en chaînes de texte ; les données peuvent être directement intégrées dans HTML.

L'environnement d'exploitation de cet article : système Windows 10, ordinateur Dell G3.

Il existe plusieurs façons de référencer des chemins d'images locaux en HTML, qui seront présentées en détail ci-dessous.

Utiliser des chemins relatifs :

Un chemin relatif est un chemin relatif à l'emplacement du fichier HTML actuel. Si l'image et le fichier HTML se trouvent dans le même dossier, vous pouvez directement utiliser le nom de fichier de l'image comme chemin relatif. Par exemple, si le fichier image est nommé "image.jpg", vous pouvez utiliser le code suivant pour référencer l'image en HTML :

<img src="image.jpg" alt="图片">

Si le fichier image se trouve dans le dossier de niveau supérieur du fichier HTML actuel, vous peut utiliser ".../" pour indiquer le dossier de niveau supérieur. Par exemple, si le fichier image se trouve dans le dossier « images » du dossier de niveau supérieur, vous pouvez utiliser le code suivant pour référencer l'image :

<img src="../images/image.jpg" alt="图片">

De même, si le fichier image se trouve dans le dossier de niveau inférieur du fichier HTML actuel, vous pouvez utiliser "./" qui représente le dossier actuel. Par exemple, si le fichier image se trouve sous le dossier "images" du dossier courant, vous pouvez utiliser le code suivant pour référencer l'image :

<img src="./images/image.jpg" alt="图片">

Utiliser un chemin absolu :

Un chemin absolu est le chemin complet en commençant par le répertoire racine. Il est possible d'utiliser des chemins absolus pour référencer des images locales, mais ce n'est généralement pas une bonne pratique car les chemins absolus peuvent poser des problèmes dans différents environnements. Cependant, si vous avez vraiment besoin d'utiliser un chemin absolu, vous pouvez utiliser le code suivant pour référencer l'image :

<img src="/path/to/image.jpg" alt="图片">

où "/path/to/" est le chemin du fichier image par rapport au répertoire racine.

Utilisez l'encodage Base64 :

L'encodage Base64 est une méthode de conversion d'images en chaînes de texte, qui vous permet d'intégrer des données d'image directement dans HTML. Cette méthode convient aux petites images ou lorsque vous devez réduire les requêtes HTTP. Vous pouvez utiliser le code suivant pour convertir l'image en encodage Base64 :

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAAAAAAD/4QA6RXhpZgAATU0AKgAAAAgABwEAAAQAAABsAAAABAAQAAA
EBAAABAAAAABsAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAB9KADAAQAAAABAAAB9AD/2wBDAAoHBwkHBgoJ

Parmi eux, la partie après "data:image/jpeg;base64" est l'encodage Base64 de l'image. Notez que cette méthode augmentera la taille du fichier HTML et peut affecter la vitesse de chargement des pages.

Quelle que soit la méthode que vous utilisez, vous devez vous assurer que le fichier image existe dans le chemin spécifié et que le chemin est correct. De plus, il est recommandé de placer les fichiers image dans le même dossier que les fichiers HTML ou dans un dossier image spécial pour une gestion et une maintenance plus faciles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!