npm 包 markdown-magic-local-image 使用教程-JavaScript中文网-JavaScript教程资源分享门户

本文将为大家介绍如何使用 npm 包 markdown-magic-local-image 以优雅地处理本地图片链接在 Markdown 文档中的引用问题。

什么是 markdown-magic-local-image?

markdown-magic-local-image 是一个用于转换 Markdown 文档中本地图片链接的 npm 包，主要优点包括：

将本地图片链接自动转换为 base64 编码，减少 HTTP 请求次数，提升页面加载速度。
支持本地图片链接的绝对路径和相对路径。
可以自定义输出的图片格式和大小。
可以在生成的 HTML 文件中嵌入 CSS 样式。

如何使用 markdown-magic-local-image?

在这里，我们将使用 markdown-magic-local-image 与 markdown-magic 一起运行，加快 Markdown 文档转换为 HTML 文档的速度。

首先，我们需要安装 markdown-magic-local-image 和 markdown-magic：

npm install markdown-magic markdown-magic-local-image --save-dev

接下来，创建一个名为 process-doc.js 的文件，输入以下代码：

-- -------------------- ---- -------
--- ------------- - --------------------------
--- ---- - ----------------
--- ------- - ----------------------- ------

--- ------ - -
  ----------- -
    ------------ -------------------------------------
  -
--

--- ------------ - ------------------ -------------
--------------------------- --------

在当前目录下的 README.md 中，我们可以定义本地图片引用。

以相对路径为例：

![avatar](./images/avatar.png)

以绝对路径为例：

![node logo](/Users/用户名/Documents/nodejs-logo.png)

在定义的本地图片链接后面加上 ，这将指示 markdown-magic-local-image 将图片链接转换为 base64 编码图片。

![avatar](./images/avatar.png) <!-- AUTO-GENERATED-CONTENT:LOCAL_IMAGE -->

最后，在命令行中输入以下命令：

node process-doc.js

之后 markdown-magic-local-image 将处理所有定义了  的图片链接，并在 Markdown 文档中替换为 base64 编码图片。

如何自定义 markdown-magic-local-image 输出格式和大小？

markdown-magic-local-image 与 markdown-magic 一起运作，因此您可以像使用 markdown-magic 一样自定义输出格式和大小。

例如，以下代码将使用 markdown-magic-local-image 将图片链接转换为 300x300 像素的图片，并将其插入到 div 元素中：

<!-- local-image format=png size=300x300 --><img src="./images/node-logo.png"><!-- AUTO-GENERATED-CONTENT: LOCAL_IMAGE -->

请注意，您必须在定义的本地图片链接和  之间放置 markdown-magic-local-image 指令。

总结

在本文中，我们介绍了 npm 包 markdown-magic-local-image 的用法和优点，向您展示了如何使用它来处理 Markdown 文档中的本地图片链接，并提供了一些自定义输出的实例代码。我相信这对于前端开发人员来说是非常有用的。

如果您有任何问题或疑问，请随时在评论区与我分享。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600568d081e8991b448e48ef