对于 Markdown 文章,对于图片的处理很简单。
但是转化成 HTML 后,<img src="url" />
不带有图片的大小。
那么这样带来的问题是什么呢?
浏览器在未加载完图片数据的时候,浏览器是不知道其大小的
所以,默认大小都是 0,除非通过 style
设置了大小
之后的某个时候,图片加载完成,浏览器得到图片大小,新视觉影院6080文章就会有跳动的感觉,阅读体验不佳
解决该问题,可以在书写 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