美文网首页
在博客中插入图片

在博客中插入图片

作者: 半掩时光 | 来源:发表于2019-04-20 22:28 被阅读0次

在写文章时,常常有配图说明的需求,Hexo有多种图片插入方式,可以将图片存放在本地引用或者将图片放在CDN上引用,通过此文总接一下在 hexo 搭建的博客中,插入图片的常用方式。

src 链接

如果你要插入的图片,是一个外部的 src 链接地址,比如该图片存放在 CDN 上,或某某图床上面,那就使用 Markdown 默认的插入图片的方式,方法和插入链接很像,只是前面多了一个感叹号,如下:

![alt](https://ws3.sinaimg.cn/large/005BYqpgly1g29eohl7qhj31c00u0dkz.jpg)

本地绝对路径

当 Hexo 项目中只用到少量图片时,可以将图片统一放在 source/images 文件夹中,通过 Markdown 语法访问它们。

![alt](/images/test.jpg)

本地相对路径

图片除了可以放在统一的 images 文件夹中,还可以放在文章自己的目录中,文章的目录可以通过配置 _config.yml 来生成。配置如下:

post_asset_folder: true

_config.yml 文件中的配置项 post_asset_folder 设为 true 后,执行命令 $ hexo new post_name,在 source/_posts 中会生成文章 post_name.md 和同名文件夹 post_name 。将图片资源放在 post_name 中,文章就可以使用相对路径引用图片资源了。

![alt](test.jpg)

Base64 格式

最后补充一种在 Markdown 中插入Base64 格式图片的方法,和第一种插入外链的方式类似,注意是圆括号 (),而不是方括号 []

![alt](data:image/jpeg;base64,/9...)

参考链接及工具

相关文章

  • 在博客中插入图片

    在写文章时,常常有配图说明的需求,Hexo有多种图片插入方式,可以将图片存放在本地引用或者将图片放在CDN上引用,...

  • 建站分享:Gitee+PicGo 搭建Markdown图床

    图床是干什么的? 图床就是一个便于在博文中插入在线图片连接的个人图片仓库。设置图床之后,在自己博客中插入的图片链接...

  • word表格中插入图片时只显示一个窄条的解决方法

    在word表格中插入图片的操作很简单: 插入->图片 然后,在盘上选择图片插入。 但是,有的时候,插入的图片只显示...

  • CSDN博客调整图片大小、位置、格式去水印的方法

    在CSDN写博客的过程中,插入图片,往往是这个样子的~ 图片往往显示的特别大,查询得知CSDN竟然把调整图片大小这...

  • md语言的使用

    插入图片 在 Markdown 中,插入图片不需要其他按钮,你只需要使用![] (图片地址) 插入引用 插入链接和...

  • 图床神器 iPic 首度公开体验

    设想一下,将 Sketch 设计的图片插入博客,需要多少步? 将 Sketch 中的图片保存为临时图片文件 打开浏...

  • 图片跳转语法

    图片链接 如果拷贝了别人的图片插入到自己的博客中,最好在图片上给出一个超链接指向源头,方便追溯出处。我们在 Mar...

  • PicGo+Gitee搭建图床

    为什么要用图床 写Markdown插入图片时,可以插入本地图片或网络图片。 本地图片自然只能本地看。不少博客平台可...

  • Android学习笔记2 --在github上插入gif图片

    (本文同步在个人Google博客中) 想在github上插入GIF图片才发现自己不会。 因为很多教程已经过期,现把...

  • 在PPT中如何插入及编辑图片

    在PPT中如何插入及编辑图片 在幻灯片中既可插入计算机中保存的图片,也可插入联机图片和屏幕截取的图片。 关-1- ...

网友评论

      本文标题:在博客中插入图片

      本文链接:https://www.haomeiwen.com/subject/eqsrgqtx.html