Softonic

Markdown 图片生成器

步 1 / 3
下一个

Markdown 的图片语法（![alt](src "title")）很容易写错：漏掉一个括号、忘记替代文本，或与链接语法混淆，文档就会渲染出一个损坏的占位符。此生成器接收图片 URL、替代文本、可选标题和可选链接目标，同时输出内联格式和引用格式的 Markdown，方便你粘贴适合文档的那一种。

如何生成 Markdown 图片语法

  1. 1

    粘贴图片 URL

    绝对 URL（https://...）或相对路径（/images/hero.png）。

  2. 2

    编写替代文本

    用一句话说明图片展示的内容。为无障碍访问所必需。

  3. 3

    添加标题（可选）

    在大多数渲染器中，鼠标悬停时显示。

  4. 4

    包裹在链接中（可选）

    提供一个 URL，使图片可点击。

  5. 5

    复制代码片段

    获取内联格式 `![alt](src)` 或引用格式 `![alt][ref]` 的输出。

四种语法形式

内联，无标题：

![产品主图](/images/hero.png)

内联，带标题：

![主图](/images/hero.png "拍摄于2026年10月的产品主图")

可点击图片（用链接包裹的图片）：

[![主图](/images/hero.png)](https://example.com/buy)

引用格式（将长 URL 移出段落）：

![主图][hero]

[hero]: /images/hero.png "拍摄于2026年10月的产品主图"

替代文本很重要

  • 无障碍访问。 屏幕阅读器会朗读替代文本；替代文本为空意味着图片对视障用户而言实际上不可见。
  • SEO。 搜索引擎依靠替代文本理解图片内容。缺少替代文本会损害来自图片搜索的流量。
  • 优雅降级。 如果图片加载失败，用户看到的就是替代文本。

好的和差的替代文本

意图 好的替代文本 差的替代文本
产品照片 “木质书桌上的红色陶瓷马克杯，把手朝左” “马克杯图片”
屏幕截图 “含邮箱、密码和 SSO 按钮的登录页面” “screenshot.png”
装饰性 ""（纯装饰用途的空替代文本） “装饰图片”
信息图 “柱状图：营收从2023年的100万元增长到2026年的300万元” “柱状图”

易犯的错误

  • 不要用“图片：”作为替代文本的开头，屏幕阅读器已经会声明这是一张图片。
  • 绝对路径与相对路径。 当文档在其所在文件夹之外渲染时（例如在 GitHub 预览中），相对路径会失效。拿不准时请使用绝对路径。
  • URL 中的空格需要进行 URL 编码：用 %20 代替空格，否则图片无法加载。

常见问题

纯 Markdown 中不行。大多数渲染器（GFM、Docusaurus、MkDocs）会回退到原始 HTML 来设置尺寸，<img src="..." width="400" alt="...">。部分方言支持 ![alt](url =400x)，但并不通用。

alt 是朗读给屏幕阅读器、并在图片加载失败时显示的文本。title 是鼠标悬停时出现的提示框，通常为可选，且在触摸设备上会被忽略。

当图片多次出现，或 URL 太长而使段落杂乱时。引用格式让正文保持易读，并使修改 URL 只需一处编辑。

是的，将图片嵌套在链接中（[![alt](img)](url)）是标准的 CommonMark。渲染后的输出是一个包裹着 <img> 的超链接。

相关工具

ASCII 表参考

完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。

HTML 字符参考

可搜索的 HTML 实体列表，含命名代码与数值代码，并支持一键复制特殊字符和符号。

键盘快捷键参考

搜索 macOS、Windows 和 Linux 上 VS Code、Chrome 以及使用 GNU Readline 的 Bash 的文档默认快捷键。

邮箱验证器

验证邮箱地址：RFC 5322 语法检查、实时 MX 记录查询，并显示本地部分、域名和长度详情。不会发送任何邮件。

编辑器配置生成器

根据你的缩进样式与大小、行尾、字符集和空格规则生成 .editorconfig 文件，让不同集成开发环境（IDE）和编辑器的格式保持一致。

证书解码器

粘贴一张 X.509 PEM 证书，并查看解码后的字段：主体、颁发者、序列号、签名算法、有效期及主体备用名称（SAN）。

此工具还提供其他语言版本