为 Markdown 图片加上大小吧！

2024年1月11日 203次阅读 来源: moyuyc

关于 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞