一招搞定Typora本地图片导成html查看不了 作者: 灯小笼 时间: 2025-05-07 分类: 工具 [Typora](https://typora.io/)是一款用户体验极强的Markdown编辑器，编辑内容体验非常流畅，且具备导出成各种格式的强大功能。比如pdf、word、html等，都不在话下。不过，在导出带有本地图片的md文件成html的时候，却遇到了在别人那边查看不了图片的问题。 <!--more--> ## 原因 这是因为，图片使用的是一个本地的文件路径，导出成html以后，还是使用的本地的文件路径，在自己的电脑上看一切正常，但是分享给其他人之后，在他的电脑上则不存在这个文件。 ## 尝试直接改 怎么办，首先想到的是把markdown里边的图片网址直接替换成base64编码的内容，但是在我使用的版本(版本0.11.18 (5941))下，展示出来的就是base64的内容，导出成html以后，也依然如此。 ## 使用html标签 那么，直接使用html标签来写会怎样呢？ ```html <img src="data:image/jpg/png/gif;base64,iVBORw0KG..."/> ``` 导出html之后，发现html标签已经被转义了，直接展示出html源码了。 ## 配置导出后的自定义脚本 既然没法直接解决，那么就考虑利用typora的导出自定义脚本来搞定吧。  配置好自定义命令的脚本，然后再实现一下。 ```bash /Users/ronnie/bin/typora_export_html "${outputPath}" ``` 创建对应的脚本： ```bash vim /Users/ronnie/bin/typora_export_html ``` 写入下面的内容 ```php #! /usr/local/bin/php <?php // 获取要处理的文件路径 $path = $argv[1]; if (!file_exists($path)) { die("file not found:{$path}"); } $content = file_get_contents($path); if (stripos($content, "<img") === false) { return; } // 切换到要处理的文件所在的目录，因为图片都是相对于该目录的路径 chdir(dirname($path)); // 匹配到图片的src属性 $newContent = preg_replace_callback('#<img src="([^\"]+)"#m', function($ms) { $imgPath = $ms[1]; if (!file_exists($imgPath)) { return $ms[0]; } $binary = file_get_contents($imgPath); $base64 = base64_encode($binary); // 将原来的本地路径，替换为base64编码内容 return "<img src=\"data:image/jpg/png/gif;base64,".$base64."\""; }, $content); // 修改路径 file_put_contents($path, $newContent); ``` 然后给文件执行的权限 ```bash chmod a+x /Users/ronnie/bin/typora_export_html ``` 然后重新将带有本地图片的md文件，在typora中导出成html文件，发现图片已经直接使用base64编码了，这样，再也不用担心分享的html文件别人看不到图片了。  标签: typora, 导出html
