0%

关于博客发布插入图片的几种方法

这里说的情况都是markdown的文件。

1、图床外链 这需要上传图片,多少有些不方便,还取决于图床稳定。不过也可以自己买oss,当然 ,就是费钱。 2、上传图片到仓库 能解决自建博客的问题,但是复制到别的平台发布的时候有些不方便,不能自动上传图片。不过可以通过 复制博客可以obsidian的复制自动转成markdown功能,再发布到别的平台上。 3、图片转base64直接嵌入md文档 这个图片会跟着文件走,基本上是最稳妥的方式,但是在本地端不太好保存回去成图片。(快捷方法?)而且由于里面字符太多,搜索英文的时候会有很多误判断的结果。 可以使用小米笔记编辑博客文档,图片会自动转成base64。 4、OneNote复制图片 OneNote用Ctrl+C复制图片粘贴到Obsidian里面的时候会附带图片的Base64和图片的OCR文字内容

具体插入图片语法

1 最常见的markdown语法 2 HTML

 <center><img src="双路混音器制作记录/image-20211113034220481.png" alt="image-20211113034220481" style="zoom: 67%;" /></center>

或者:

<div align=center><img src="./长白山行简记/IMG_20230606_195217-01.jpeg" width="600"></div>

注释:似乎是由于拼音url插件或者其他原因,这一条插入本地图片的时候会出现没有替换为正确路径的问题,之前是可以的。我懒得改了,可以用图床,或者就用普通Markdown语法拉倒。

部署之后的显示

Hexo默认的图片显示方法和md语法不兼容。。。 1、如果使用默认md语法:

{% asset_img "span>" "name" %}

这时候渲染就会出问题。

网上说法很多,我分不太清,实测有效:

npm install hexo-image-link --save
npm install hexo-asset-image --save

然后打开hexo config中的: post_asset_folder: true #是否启用资源文件夹(用来存放相对路径图片或文件)

这两个似乎不是一个效果,但是考虑到有效我就不折腾了。。。

网上有些要修改代码,这个应该是不用修改的

2、使用HTML插入图片

这个方法和typero一样,也就是上面的方法,这种方法能直接显示的。一般不会遇到问题。缺点是在obsidian里面显示不出来。。。不过TypeDown也可以显示。