博客加载图片

如今开始写博客了，最近几篇博客需要用到图片，但是一直不知道怎么解决，使用markdown语法的图片，使用markdown编辑软件可以看到，但是在网页上加载不出来，一直在网上查找解决方案，现在可以展示图片了，现在将这方法写下来。

创建文件夹

在博客目录下的资源文件夹下创建保存图片的文件下。

博客目录如下：

blog_content

在source目录下创建images文件夹，用于保存图片。

如下图：

create_images

在博客中引用图片

移动图片

我们将需要引用的图片放在images文件夹里面，当然也可以创建多个文件夹分批保存图片，如下图。

移动图片

使用图片

方法一：

在博文中需要引用图片的位置编写如下语法：

![图片解释说明](图片路径)

 图片解释说明是显示图片下面的字；
 图片路径 是存放图片的路径；
    如：我刚创建的images,引用地址就是 /images/图片名字：
    ![博客引用图片](/images/show.png)

效果如下：

博客引用图片

方法二：

使用<img> 标签，就如写html插入图片一样：

<img src="图片路径" alt="图片解释说明文字">
    
    图片路劲 是存放图片的路径；
    alt属性可有可无；
	 如：我刚创建的images,引用地址就是 /images/图片名字：
       <img src="/images/show.png" alt="博客引用图片">

效果如下：

缺陷

这种在博客中添加图片的方式，在加载图片的时候可能会比较慢，特别是图片过多的时候，项目会比较大，最好是将图片托管在图片网站，然后直接使用网上地址。

注意

当我们把博客托管在github上后，我们在使用hexo s 命令，本地运行后，可能会显示不出图片，这是因为hexo g 命令会将图片的地址转换为网络地址，会带上你的gtihub网址，这时我们想在本地看到效果的化，先执行 hexo d ,上传到github，然后在hexo s，在本地查看效果。

最后更新： 2019年11月04日 18:11

原始链接： http://ligangit.com/2019/10/25/博客加载图片/

赏