为 Markdown 图片加上大小吧!

关于 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
    原文地址: https://segmentfault.com/a/1190000008321324
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞