[Obsidian] html本地图片无法显示问题

问题

最近下载某谷的学习笔记,发现里面的md文件里的图片格式居然是html和md语法混用, 比如:

方式1(html):

html 复制代码
<img src="images/1681181342911.png" alt="1681181342911" style="zoom: 67%;" />

方式2(md):

scss 复制代码
![1681177316138](images/1681177316138.png)

用Typora打开这些文件,图片是能正常显示的。但对于我这种Obsidian重度患者来说,当看到图片在Obsidian里不是显示成一个默认显示不出来的图标(方式1)就是白屏卡顿(方式2在[]里直接写过大的数字会导致Obsidian渲染图片出错,直接白屏显示不出后面的内容),就觉得很神奇,于是上网搜以及问了某群群友,总结思路如下

思路

思路1:将相对路径改为绝对路径

images然后替换为其在本地的绝对路径即可

不过这种方式以后比较难迁移,不建议

思路2:将html标签改为md语法

  • 思路1:Obsidian插件
    我搜到的只有将html文件转为md文件的插件或软件,所以我没有实践该思路。希望有大佬以后能提供相应插件
  • 思路2:python脚本
    这里提供链接:zhuanlan.zhihu.com/p/608801561 有兴趣的可以尝试,想在Obsidian里运行python脚本应该还要下个Template插件。这个我也没实践
  • 思路3:正则替换
    我是用这个方法解决的,该思路来源于群友回答,非常感谢
  1. 群友是通过Quicker进行正则替换的(因为Obsidian的原生替换不支持正则),提供的正则表达式如下:
css 复制代码
查找匹配:
(?<!\\)\<img .*src\=\"(?<src>.+?[^\\])\".*[^\\]\/\>

替换为:
![]($1)

一开始我没用这个正则,而是去Chatgpt问,Chatgpt提供的查找匹配如下:

ini 复制代码
<img\s+src="([^"]+)"\s+alt="([^"]*)"\s*style="zoom:\s*([^"]+);"[^>]*>

结果有的图片居然匹配不到,我也不知该如何评论Chatgpt了

  1. 然后通过Obsidian的插件regex find/replace即可替换

但是我发现Typora居然支持正则替换,于是最后我是用Typora替换才导入Obsidian的,就不用装插件什么的了

总结如下:

  1. 替换html标签图片
css 复制代码
查找匹配:
(?<!\\)\<img .*src\=\"(?<src>.+?[^\\])\".*[^\\]\/\>

替换为:
![]($1)
  1. 替换[]里有数字的图片
css 复制代码
查找匹配:
!\[\d+\]

替换为:
![]

略有不足的就是替换html标签图片时没能将缩放比例也保存下来,问了Chatgpt,它给的正则如下:

ini 复制代码
替换为:
![${2}](${1}){width=$3px}

但是无法生效,而且要注意的是${2}是数字不能直接放[]里,不然直接白屏卡顿,Obsidian的像素宽其实应该放在[]里,用|隔开,官方示例如下:

less 复制代码
![Engelbart|100](https://history-computer.com/ModernComputer/Basis/images/Engelbart.jpg)

但用$3并不能取出像素放到[]里。不过Obsidian渲染图片并不会很大,感觉正常能看,如果想缩放,可以手调

本文只是记录一下自己遇到问题的解决过程,可能有点啰嗦。如果有更好的解决方案欢迎随时补充

相关推荐
花归去4 小时前
ant的a-table更改表格的高度
前端·javascript·html
Ming_studying9 小时前
HTML + CSS + JavaScript实现可视化JSON工具:格式化、折叠、搜索与错误定位
javascript·css·html·json·数据可视化·web工具
DS随心转插件1 天前
Grok生成的html怎么导出——AI导出鸭:大模型结构化输出的“最后一公里”工程化解构
前端·人工智能·ai·html·豆包·deepseek·ai导出鸭
01_ice1 天前
html个人简历展示
前端·html
灯澜忆梦2 天前
【基于GO的Web开发4】html/template 模板语法
后端·golang·html
IMPYLH2 天前
HTML 的 <html> 元素
前端·javascript·html
珐恩AI-人工智能3 天前
大模型意图召回偏差分析:GEO如何解决“有收录却不触发问答曝光”的难题
大数据·前端·人工智能·html·流量运营·geo优化
zhanghaha13143 天前
HTML系列教程:4_什么是 HTML 元素(零基础超详细讲解)
前端·算法·html
AI 编程助手GPT3 天前
VS Code 1.133 实战:Claude 可免 GitHub 登录,HTML 保存后自动刷新
前端·html·github
zhanghaha13144 天前
HTML系列教程:3_HTML 基础标签 — 标题、段落、超链接、图像
前端·html