1.首先确认_config.yml 中有 post_asset_folder:true
Hexo 提供了一种更方便管理 Asset 的设定:post_asset_folder
当您设置post_asset_foldertrue参数后,在建立文件时,Hexo
会自动建立一个与文章同名的文件夹,您可以把与该文章相关的所有资源都放到那个文件夹,如此一来,您便可以更方便的使用资源。

2.在hexo的目录下执行npm install https://github.com/CodeFalling/hexo-asset-image --save(需要等待一段时间)。

3.完成安装后用hexo新建文章的时候会发现_posts目录下面会多出一个和文章名字一样的文件夹。图片就可以放在文件夹下面。结构如下:

本地图片测试
├── apppicker.jpg
├── logo.jpg
└── rules.jpg
本地图片测试.md

这样的目录结构(目录名和文章名一致),只要使用 ![logo](本地图片测试/logo.jpg) 就可以插入图片。其中[]里面不写文字则没有图片标题。
生成的结构为

public/2016/3/9/本地图片测试
├── apppicker.jpg
├── index.html
├── logo.jpg
└── rules.jpg

同时,生成的 html 是

<img src="/2016/3/9/本地图片测试/logo.jpg" alt="logo">

而不是愚蠢的

<img src="本地图片测试/logo.jpg" alt="logo">

注意:
通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。在Hexo2时代,社区创建了很多插件来解决这个问题。但是,随着Hexo3的发布,许多新的标签插件被加入到了核心代码中。这使得你可以更简单地在文章中引用你的资源。

 
 

比如说:当你打开文章资源文件夹功能后,你把一个 example.jpg图片放在了你的资源文件夹中,如果通过使用相对路径的常规 markdown 语法 [](/example.jpg),它将 不会 出现在首页上。(但是它会在文章中按你期待的方式工作)

正确的引用图片方式是使用下列的标签插件而不是markdown

 
 
 

地址:https://www.jianshu.com/p/c2ba9533088a

【转】hexo博客图片问题的更多相关文章

  1. hexo博客图片问题

    hexo博客图片问题 第一步 首先确认_config.yml 中有 post_asset_folder:true. Hexo 提供了一种更方便管理 Asset 的设定:post_asset_folde ...

  2. Hexo 博客图片添加至图床---腾讯云COS图床使用。

    个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 腾讯云官网 登录注册 创建存储桶 进入上面的存 ...

  3. Hexo博客插入图片的方法

    Hexo博客插入图片的方法 hexo图片blog hexo blog 插入图片的方法总结 hexo 的blog 内容是根据 markdown 文件的内容生成的html文件, 生成的文件全部在 /pub ...

  4. hexo博客如何插入图片

    Hexo是一个静态的博客网站生成器,生成一个博客只需要分分钟的时间就能搞定. Hexo的博文是支持Markdown格式的,发表一篇文章只需要简简单单的几个命令. hexo new '文章'就会生成一个 ...

  5. hexo博客MathJax公式渲染问题

    这个问题自己很早以前便碰到了,用MathJax语法写的一些公式,在本地Markdown编译器上渲染是没问题的,可是部署到hexo博客中就出现问题了,之前我是使用图片代替公式应付过去了,今天从网上找了一 ...

  6. Hexo博客主题优化

    Hexo博客主题优化 添加背景图 在 themes/*/source/css/_custom/custom.styl 中添加如下代码: body{ background:url(/images/bg. ...

  7. Hexo 博客 github.io MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  8. Hexo博客搭建以及Next主题美化的经验之谈

    这并不是一篇博客搭建教程.内容主要包含个人对于Hexo博客搭建的心得,Next6.0主题美化的部分建议,以及摘录一些各种用于博客搭建的link. 在博客园3年6个月,确实也学到了很多,博客园也是目前为 ...

  9. Hexo博客搭建全解

    [原创,转载请附网址:http://dongshuyan.top] 欢迎来到莫与的博客,第一篇记录了一下怎么写一篇博客,以方便之后写博客~ #从配置说起下载安装Git与Node.js略过 1.安装he ...

随机推荐

  1. Spring知识点总结(二)之Spring IOC

    1.创建bean类,并在spring中进行配置交由spring来管理1. IOC(DI) - 控制反转(依赖注入)    所谓的IOC称之为控制反转,简单来说就是将对象的创建的权利及对象的生命周期的管 ...

  2. flask笔记(一)

    1.第一个flask项目 # 首先你要安装flask这个模块 pip install flask # 安装好了之后,直接新建一个py文件,开始写最简单的flask项目了 from flask impo ...

  3. WebMagic 启动例子报错

    报错内容: Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/http/conn/Http ...

  4. python的元组数据类型及常用操作

    Python的元组与列表类似,不同之处在于元组的元素不能修改. 元组使用小括号,列表使用方括号. 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可. 如下实例: tup1 = ('physi ...

  5. nginx 只允许域名访问,禁止IP访问

    在nginx中为了防止,通过ip地址或者没有备案的域名代理到nginx上,可以在nginx中配置来阻止这一操作 #只可以用域名访问(此处的server是新增,并不是在原有的server基础上修改),默 ...

  6. Python面向对象的类的操作

    import randomimport time class ElectronicCoupon(): def __init__(self): self.__ecid=time.strftime('%Y ...

  7. R语言学习笔记(二十):stringr包中函数介绍(表格)

    stringr包中的重要函数 函数 功能说明 R Base中对应函数 使用正则表达式的函数 str_extract() 提取首个匹配模式的字符 regmatches() str_extract_all ...

  8. vs2013中将复制过来的文件或文件夹显示到解决方案管理

    先将文件夹和文件复制到VS程序所在的位置,在VS2013解决方案资源管理器中找到这些文件所在的上一级文件夹,先将那个上层文件夹收缩起来,然后再点击解决方案资源管理器上的“显示所有文件”按纽,展开这个文 ...

  9. Android 数据库 ANR的例子

    android 开启事务之后,在其他线程是不能进行增删改查操作的.例子如下: 首先,一个线程里面去开启事务,里面对数据库的任何操作都没有. DBAdapter.getInstance().beginT ...

  10. 生成Excel.xlsx文件 iOS

    使用到的三方库 https://github.com/jmcnamara/libxlsxwriter cocoapods导入 pod 'libxlsxwriter', '~> 0.8.3' 1. ...