MarkDown里显示图片的方式可以引入HTML方法

使用MarkDown写博客的时候,发现用自带语法(markdown基本语法使用),图片大小没法设置,找了些资料,小记一下,参考了大佬的博客1

MarkDown 图片大小问题

MarkDown里显示图片的方式可以引入HTML方法,
以512×512的lena图像为例,
直接以MarkDown插入图片的方法,图片就会靠在左侧,大小也不由自己决定:

![lena](https://img-blog.csdn.net/20151129213701642)

lena

其中https://img-blog.csdn.net/20151129213701642是本人上传的lena图像链接。

固定图片显示大小:

<img src="https://img-blog.csdn.net/20151129213701642" width=256 height=256 />

其中src后面接的就是图像对象,width和height设置的是显示图像的尺寸。

根据一定比例显示:

<img src="https://img-blog.csdn.net/20151129213701642" width="50%" height="50%" />

其中width和height后面的50%就是根据窗口的大小以一定的比例显示图片。值得一说的是,这种按照百分比显示方法,是以width方向为准,并保持纵横比的,换句话说,把设置width的部分去掉,height的值改为任意百分比,显示的图像都是原图大小(个人觉得这根博客窗口有关,毕竟现实截面的宽度相对是固定的,而高度/长度却是变化着的)。因此用此方法的时候,可以把height设置缺省。(亲测,好用,只设width,可以维持原图比例)

如:

<img src="https://img-blog.csdn.net/20151129213701642" height="5%" />

是不是,还是原图的大小……

如果想给图像加个标注,可以这么做:

<center>
<img src="https://img-blog.csdn.net/20151129213701642" width="25%" height="25%" />
Figure 1. Lena
</center>



Figure 1. Lena

Figure 1. Lena
如果想让图和标注间距离增大,可以这么做:

<center>
<img src="https://img-blog.csdn.net/20151129213701642" width="25%" height="25%" />
$ $
Figure 1. Lena
</center>



<script type="math/tex" id="MathJax-Element-2"> </script>
Figure 1. Lena

亲测,只设width:

<center>
<img src="https://img-blog.csdn.net/20151129213701642" width="40%" />
Figure 1. Lena
</center>



Figure 1. Lena

Markdown文档中的图片无法显示时,通常有几种可能的原因。一种可能是Markdown文档中的图片路径发生了变化。在上传到Gitee或其他服务器之后,图片的路径需要进行相应的修改才能正确显示。比如,如果使用的是绝对路径方式导入图片资源,那么需要确保图片路径正确并且与服务器上的文件路径匹配。 另外,有时候在本地加载图片没有问题,但上传到服务器后出现异常,这可能是因为服务器上的文件路径与Markdown文档中的路径不一致,导致图片无法正常加载。 如果图片路径没有问题,还有可能是图片文件本身出现了错误或损坏。请确保图片文件存在,并且文件格式正确。可以尝试打开图片文件确认是否能够正常显示。 如果以上方法都不能解决问题,还可以尝试使用其他方式引入图片,比如使用HTML图片引入标签来显示图片。具体可以使用`<img src="图片路径"/>`的方式引入图片。这样可以绕过Markdown图片链接语法,直接使用HTML标签进行图片引入。 总结来说,当Markdown中的图片无法显示时,可以检查图片路径是否正确,图片文件是否存在和正确,尝试使用HTML图片引入标签等方法来解决问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [关于Markdown图片无法显示的问题解决方法,Typora编写完Markdown文档后,本地图片显示正常,上载到github上...](https://blog.csdn.net/xh13096/article/details/103510129)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [Gitee上传Markdown文档后图片无法读取问题解决](https://blog.csdn.net/qq_40491534/article/details/120461496)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值