Markdown Images
Images can make documents more vivid and easier to understand.
Markdown's image syntax is simple and flexible.
The Markdown image syntax format is as follows:
 
- Start with an exclamation mark !
- Then a square bracket, inside which you put the alternative text for the image.
- Then a regular parenthesis, inside which you put the image URL, and finally you can optionally add text for the 'title' attribute wrapped in quotes.
Relative path example:
  
Absolute path example:
 
Path usage suggestions:
- It is recommended to use relative paths for easier project portability.
- It is recommended to create a dedicated image folder (e.g., images/, assets/).
- Use meaningful file names for easier management.
- Be aware of differences in path separators across different operating systems.
Directly reference online images:
 
The displayed result is as follows:
Of course, you can also use variables for image URLs, just like with URLs:
这个链接用 1 作为网址变量 [EXAMPLE][1]. 然后在文档的结尾为变量赋值（网址） [1]: /static.jyshare.com/images/example-logo.png
The displayed result is as follows:
Markdown does not yet have a way to specify the height and width of images. If you need to, you can use a regular <img> tag.
<img src="../static.jyshare.com/images/example-logo.png" width="50%">
The displayed result is as follows:
Using CDN services:
 
Things to note about online images:
- Ensure the stability and accessibility of the image URL.
- Be mindful of image copyright issues.
- Consider loading speed and network environment.
- It is recommended to back up important images locally.
Importance of Image Alt Text
Alt text (alternative text) provides alternative information when an image cannot be displayed, and is also important for accessibility and SEO:
Example of good alt text:
  
Alt text to avoid:
 // 太简单，没有描述性  // 完全没有 alt 文本  // 不描述图片内容
Alt text best practices:
- Concise but descriptive
- Describe the main content and purpose of the image.
- Avoid redundant words such as 'image', 'photo', etc.
- For decorative images, you can use empty alt text.
- Consider the context and provide meaningful information.
Image Size Control (HTML Method)
Standard Markdown does not support directly controlling image size, but you can use HTML tags.
Using the HTML img tag:
<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;">
Responsive images:
<img src="image.jpg.html" alt="描述文字" style="max-width: 100%; height: auto;">
Image alignment:
<!-- 居中对齐 --> <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;">
Advanced Usage of Links and Images
Image Link Combinations
Use an image as a clickable element for a link.
Basic syntax:
[](链接URL)
Practical examples:
[](https://github.com/username/project) [](https://example.com "点击访问官网")
Common use cases:
<!-- 项目徽章 --> [](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)
Relative Paths vs Absolute Paths
Advantages of relative paths:
<!-- 项目结构 -->
project/
├── README.md
├── docs/
│ ├── guide.md
│ └── images/
│ └── screenshot.png
└── assets/
└── logo.png
<!-- 在 README.md 中 -->
<!-- 在 docs/guide.md 中 -->
Path planning suggestions:
- Create a unified resource folder in the project root directory.
- Use descriptive folder names.
- Maintain consistency in path structure.
- Consider the path rules of static site generators.
Image Centering and Alignment
Method 1: HTML + CSS
<div style="text-align: center;"> <img src="image.jpg.html" alt="居中图片" style="max-width: 100%;"> </div>
Method 2: Using HTML alignment attributes
<p align="center"> <img src="image.jpg.html" alt="居中图片" width="400"> </p>
Method 3: Creating an image gallery
<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>
Practical image display template:
## 产品展示
### 主要功能
<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>
### 界面预览
| 移动端 | 桌面端 |
|:---:|:---:|
|  |  |
| 响应式设计，完美适配 | 大屏体验，功能齐全 |
Performance optimization suggestions:
- Optimize image size and format (WebP > PNG > JPG)
- Use appropriate image dimensions, avoid scaling large images on the web page.
- Consider using image compression tools.
- Prepare different image sizes for different devices.
Troubleshooting Links and Images
Common problems and solutions:
- Link cannot be clicked: Check the syntax format, ensure square brackets and parentheses are correctly paired.
- Image not displaying: Verify the image path and that the file exists.
- Image too large: Use HTML to control size or optimize the image file.
- Open link in a new window: Use HTML<a target="_blank">tag
Debugging tips:
<!-- 测试链接是否有效 --> 测试链接：[点击测试](https://httpbin.org/get) <!-- 测试图片路径 -->  <!-- 如果不显示，尝试绝对路径或检查文件名大小写 -->
By mastering the various uses of links and images, you can create Markdown documents that are rich in content and clear in navigation. These skills are very important for writing technical documentation, project descriptions, and online content.
Other Extensions