对于 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

moyuyc
1.1k 声望261 粉丝

前端学生