插入图片与视频方法如何在博客上传视频 _经验分享

博客插入图片与视频方法
在博客中插入视频和图片能让人通俗易懂，生动形象。下面是我找到的一些方法。
图片插入
Hexo有多种图片插入方式，可以将图片存放在本地引用或者将图片放在CDN上引用。
本地引用–绝对路径
当Hexo项目中只用到少量图片时，可以将图片统一放在source/images文件夹中，通过markdown语法访问它们。
source/images/image.jpg
![(可以写关于图片的描述)](/images/image.jpg)
图片既可以在首页内容中访问到，也可以在文章正文中访问到。
本地引用–相对路径
图片除了可以放在统一的images文件夹中，还可以放在文章自己的目录中。文章的目录可以通过配置_config.yml来生成。
_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中，文章就可以使用相对路径引用图片资源了。
_posts/post_name/image.jpg
![](image.jpg)
上述是markdown的引用方式，图片只能在文章中显示，但无法在首页中正常显示。
如果希望图片在文章和首页中同时显示，可以使用标签插件语法。
_posts/post_name/image.jpg
{% asset_img image.jpg This is an image %}
CDN引用
除了在本地存储图片，还可以将图片上传到一些免费的CDN服务中。
比如Cloudinary （梯子访问）提供的图片CDN服务，在Cloudinary中上传图片后，会生成对应的url地址，将地址直接拿来引用即可。或者上传到路过图床（不用梯子）。
视频插入
插入视频与图片不同，这里以b站的视频为例

文章插图
这样直接插入的代码手机端不能自适应，效果不完美。
最好这样
<div style=”position: relative; width: 100%; height: 0; padding-bottom: 75%;”><iframe

文章插图
frameborder=”no” framespacing=”0″ allowfullscreen=”true” style=”position: absolute; width: 100%;
height: 100%; left: 0; top: 0;”> </iframe></div>

文章插图

<div style=”position: relative; width: 100%; height: 0; padding-bottom: 75%;”><iframe
【插入图片与视频方法如何在博客上传视频】

文章插图
frameborder=”no” framespacing=”0″ allowfullscreen=”true” style=”position: absolute; width: 100%;
height: 100%; left: 0; top: 0;”> </iframe></div>

插入图片与视频方法 如何在博客上传视频

插入图片与视频方法如何在博客上传视频