关于 Markdown 文章,关于图片的处置惩罚很简单。
然则转化成 HTML 后,<img src="url" />
不带有图片的大小。
那末如许带来的题目是什么呢?
浏览器在未加载完图片数据的时刻,浏览器是不知道其大小的
所以,默许大小都是 0,除非经由过程 style
设置了大小
以后的某个时刻,图片加载完成,浏览器获得图片大小,文章就会有跳动的觉得,浏览体验不佳
处理该题目,能够在誊写 markdown 文本的时刻插进去图片就誊写成 <img width="100" height="100" src="url" />
然则如今有更轻易的 node package => markdown-image-size.
将会剖析 markdown
文本,获得 <img>
![]()
文本中的 src
,经由过程读当地文件或发送要求获得图片数据,从而获得图片大小,然后举行文本 替代/插进去 即可。
运用
npm install -g markdown-image-size
Usage: mimgs [options] <files...>
Options:
-v --version get current version
-h --help how to use it
-s --source <path or url> base path from relative path
-o --overwrite overwrite files
-q --quiet Don't print any
-l --log Do print log, Don't print text
--ignore-relative ignore relative path, overrides any -s options.
mimgs -s "dirPath or baseUrl" file/to/*.md -o