1.首先确认_config.yml 中有 post_asset_folder:true。
Hexo 提供了一种更方便管理 Asset 的设定:post_asset_folder
当您设置post_asset_folder为true参数后,在建立文件时,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. 史上最简单的SpringCloud教程 | 第五篇: 路由网关(zuul)(Finchley版本)

    转载请标明出处: 原文首发于:https://www.fangzhipeng.com/springcloud/2018/08/30/sc-f5-zuul/ 本文出自方志朋的博客 在微服务架构中,需要几 ...

  2. SpringBoot非官方教程 | 第十七篇:上传文件

    转载请标明出处: 原文首发于:https://www.fangzhipeng.com/springboot/2017/07/11/springboot14-upload/ 本文出自方志朋的博客 这篇文 ...

  3. Oracle EM12c 安装

    EM12c系统由下列组件构成: 1.Oracle Management Agent(管理代理) 2.Oracle Management Service(管理服务) 3.Oracle Managemen ...

  4. oracle 的分页查询与mysql 的分页查询

    oracle 的分页查询: select * from (select o.*,rownum rn  from Persons o) where rn >40 and rn <=60 : ...

  5. UDP端口启动后一段时间无法接收到数据

    接口需求:开发一个UDP协议的接口作为服务端接收来自客户端的认证数据,数据量每分钟7w+条; 数据格式:标准的redius协议,redius协议的相关知识在网上查资料,提供线索:http://blog ...

  6. flask笔记(三)Flask 添加登陆验证装饰器报错,及解析

    Flask 添加登陆验证装饰器报错,及解析 写这个之前,是想到一个需求,这个是关于之前写Flask笔记(二)中的一个知识点,路由相关 需求为 : 有一些页面必须是登陆之后才能访问的,比如Shoppin ...

  7. yum仓库客户端搭建和NTP时间同步客户端配置

    一.yum仓库客户端搭建 yum源仓库搭建分为服务器端和客户端. 服务端主要提供软件(rpm包)和yumlist.也就是提供yum源的位置.一般是通过http或者ftp提供位置. 客户端的配置:yum ...

  8. 【BGP的基本配置】

    BGP的基本配置 一:根据项目需求搭建好拓扑图如下 二:配置 1:首先进行理论分析:RT1和RT2,3分别属于不同的AS;在RT1和RT2之间建立EBGP关系,在确保RT3可以学到RT1的8.1.1. ...

  9. Windows环境下安装redis及PHP Redis扩展

    附带管理工具安装教程 安装环境 WNMP环境 参考教程:WIN10下WNMP开发环境部署 安装windows的redis服务 安装包下载 选择msi安装包下载并安装,下载可能会有点慢,请自行使用梯子. ...

  10. VSCode插件整理

    VSCode插件整理 VSCode插件整理 官网地址 vscode常用配置(User Settings文件) 基本插件 前端插件 VUE部分 python MarkDown部分 连接Linux 本地与 ...