Images Markdown
Les images peuvent rendre les documents plus vivants et plus faciles à comprendre.
La syntaxe des images Markdown est simple et flexible.
Le format de syntaxe d'image Markdown est le suivant :
 
- Commencez par un point d'exclamation !
- Ensuite, un crochet, à l'intérieur duquel vous placez le texte alternatif pour l'image.
- Ensuite, une parenthèse normale, à l'intérieur de laquelle vous placez l'URL de l'image, et enfin vous pouvez éventuellement ajouter du texte pour l'attribut 'title' entouré de guillemets.
Exemple de chemin relatif :
  
Exemple de chemin absolu :
 
Suggestions d'utilisation des chemins :
- Il est recommandé d'utiliser des chemins relatifs pour faciliter la portabilité du projet.
- Il est recommandé de créer un dossier d'images dédié (par exemple, images/, assets/).
- Utilisez des noms de fichiers significatifs pour faciliter la gestion.
- Tenez compte des différences de séparateurs de chemin entre les différents systèmes d'exploitation.
Référencer directement des images en ligne :
 
Le résultat affiché est le suivant :
Bien sûr, vous pouvez également utiliser des variables pour les URL d'images, tout comme pour les URL :
这个链接用 1 作为网址变量 [EXAMPLE][1]. 然后在文档的结尾为变量赋值（网址） [1]: /static.jyshare.com/images/example-logo.png
Le résultat affiché est le suivant :
Markdown ne dispose pas encore d'un moyen de spécifier la hauteur et la largeur des images. Si nécessaire, vous pouvez utiliser une balise <img> standard.
<img src="../static.jyshare.com/images/example-logo.png?v=2" width="50%">
Le résultat affiché est le suivant :
Utilisation des services CDN :
 
Points à noter concernant les images en ligne :
- Assurez la stabilité et l'accessibilité de l'URL de l'image.
- Soyez attentif aux problèmes de droits d'auteur des images.
- Tenez compte de la vitesse de chargement et de l'environnement réseau.
- Il est recommandé de sauvegarder localement les images importantes.
Importance du texte alternatif des images
Le texte alternatif (texte de remplacement) fournit des informations alternatives lorsqu'une image ne peut pas être affichée, et il est également important pour l'accessibilité et le référencement (SEO) :
Exemple de bon texte alternatif :
  
Texte alternatif à éviter :
 // 太简单，没有描述性  // 完全没有 alt 文本  // 不描述图片内容
Bonnes pratiques pour le texte alternatif :
- Concis mais descriptif
- Décrivez le contenu principal et l'objectif de l'image.
- Évitez les mots redondants tels que « image », « photo », etc.
- Pour les images décoratives, vous pouvez utiliser un texte alternatif vide.
- Tenez compte du contexte et fournissez des informations pertinentes.
Contrôle de la taille des images (méthode HTML)
Le Markdown standard ne permet pas de contrôler directement la taille des images, mais vous pouvez utiliser des balises HTML.
Utilisation de la balise HTML img :
<img src="image.jpg.html" alt="描述文字" width="300" height="200"> <img src="image.jpg.html" alt="描述文字" width="50%"> <img src="image.jpg.html" alt="描述文字" style="width: 300px; height: auto;">
Images responsives :
<img src="image.jpg.html" alt="描述文字" style="max-width: 100%; height: auto;">
Alignement des images :
<!-- 居中对齐 --> <div align="center"> <img src="image.jpg.html" alt="居中图片" width="400"> </div> <!-- 左对齐（默认） --> <img src="image.jpg.html" alt="左对齐图片" style="float: left; margin-right: 20px;"> <!-- 右对齐 --> <img src="image.jpg.html" alt="右对齐图片" style="float: right; margin-left: 20px;">
Utilisation avancée des liens et des images
Combinaisons de liens et d'images
Utilisez une image comme élément cliquable pour un lien.
Syntaxe de base :
[](链接URL)
Exemples pratiques :
[](https://github.com/username/project) [](https://example.com "点击访问官网")
Cas d'utilisation courants :
<!-- 项目徽章 --> [](https://travis-ci.org/user/repo) [](https://opensource.org/licenses/MIT) <!-- 应用商店下载 --> [](https://apps.apple.com/app/your-app) [](https://play.google.com/store/apps/details?id=com.yourapp)
Chemins relatifs vs chemins absolus
Avantages des chemins relatifs :
<!-- 项目结构 -->
project/
├── README.md
├── docs/
│ ├── guide.md
│ └── images/
│ └── screenshot.png
└── assets/
└── logo.png
<!-- 在 README.md 中 -->
<!-- 在 docs/guide.md 中 -->
Suggestions de planification des chemins :
- Créer un dossier de ressources unifié dans le répertoire racine du projet.
- Utiliser des noms de dossiers descriptifs.
- Maintenir la cohérence dans la structure des chemins.
- Prendre en compte les règles de chemin des générateurs de sites statiques.
Centrage et alignement des images
Méthode 1 : HTML + CSS
<div style="text-align: center;"> <img src="image.jpg.html" alt="居中图片" style="max-width: 100%;"> </div>
Méthode 2 : Utilisation des attributs d'alignement HTML
<p align="center"> <img src="image.jpg.html" alt="居中图片" width="400"> </p>
Méthode 3 : Création d'une galerie d'images
<div style="display: flex; justify-content: space-around; flex-wrap: wrap;"> <img src="image1.jpg.html" alt="图片1" style="width: 30%; margin: 10px;"> <img src="image2.jpg.html" alt="图片2" style="width: 30%; margin: 10px;"> <img src="image3.jpg.html" alt="图片3" style="width: 30%; margin: 10px;"> </div>
Modèle pratique d'affichage d'images :
## 产品展示
### 主要功能
<table>
<tr>
<td align="center">
<img src="./images/feature1.png.html" width="200" alt="功能1">
<br>
<strong>智能识别</strong>
<br>
<sub>AI驱动的图像识别技术</sub>
</td>
<td align="center">
<img src="./images/feature2.png.html" width="200" alt="功能2">
<br>
<strong>快速处理</strong>
<br>
<sub>毫秒级响应速度</sub>
</td>
</tr>
</table>
### 界面预览
| 移动端 | 桌面端 |
|:---:|:---:|
|  |  |
| 响应式设计，完美适配 | 大屏体验，功能齐全 |
Suggestions d'optimisation des performances :
- Optimiser la taille et le format des images (WebP > PNG > JPG)
- Utiliser des dimensions d'image appropriées, éviter de redimensionner les grandes images sur la page web.
- Envisager d'utiliser des outils de compression d'images.
- Préparer différentes tailles d'image pour différents appareils.
Dépannage des liens et des images
Problèmes courants et solutions :
- Le lien ne peut pas être cliqué : Vérifier le format de la syntaxe, s'assurer que les crochets et les parenthèses sont correctement appariés.
- L'image ne s'affiche pas : Vérifier le chemin de l'image et que le fichier existe.
- Image trop grande : Utiliser HTML pour contrôler la taille ou optimiser le fichier image.
- Ouvrir le lien dans une nouvelle fenêtre : Utiliser le HTML<a target="_blank">balise
Conseils de débogage :
<!-- 测试链接是否有效 --> 测试链接：[点击测试](https://httpbin.org/get) <!-- 测试图片路径 -->  <!-- 如果不显示，尝试绝对路径或检查文件名大小写 -->
En maîtrisant les diverses utilisations des liens et des images, vous pouvez créer des documents Markdown riches en contenu et clairs dans leur navigation. Ces compétences sont très importantes pour rédiger de la documentation technique, des descriptions de projet et du contenu en ligne.
Autres extensions