【转】hexo博客图片问题

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

原文地址:https://www.cnblogs.com/sameen/p/9221926.html

时间: 2024-10-05 08:21:19

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

用Typora写Hexo博客

Typora是一个非常方便的markdown编辑器,支持所见即所得,同时也比较方便的支持本地图片的插入.使用Typora写Hexo博客,需要关注的地方就是在Typora中插入图片时,不用修改即可发布到网站. 先通过hexo产生一篇文章 myblog$ hexo n "用Typora写Hexo博客" 这时候在source/_posts下会产生下列文件和文件夹 localhost:_posts niuxinli$ ls 用* 用Typora写Hexo博客.md 用Typora写Hexo博客

腾讯云搭建hexo博客

腾讯云搭建hexo博客 hexo腾讯云 1. 腾讯云 学生认证购买 重置密码和网络备案 2. hexo博客搭建 2.1 Node.js环境准备 2.2安装git 2.3安装hexo 切换淘宝源 安装hexo 新建一个博客文件夹并初始化 启动 2.4 nginx部署 2.4域名DNS配置 3. 本地搭建hexo,git推送到腾讯云自动部署 4. 小结 1. 腾讯云 学生认证购买 在阿里云和华为云购买失败的前提下,最终找到了腾讯云的购买,学生认证后价格只要10块一月,域名16一年,价格真香,我选择

为Hexo博客添加评论模块

1. 登录多说网站http://duoshuo.com/,创建站点: 123 可以使用常用的社交账号进行登录,无需注册选择`我要安装`来创建一个站点录入基本的创建信息,点击`创建`按钮来创建一个站点 2. 修改主题配置文件: 我用的主题是freemind,主题地址https://github.com/wzpan/hexo-theme-freemind.git,修改主题的步骤请参考”修改Hexo博客主题”1.打开当前主题路径/_config.yml,找到duoshuo_shortname标签,设置

Hexo博客迁移到Coding

Coding是一个面向开发者的云端开发平台,目前提供代码托管,运行空间,质量控制,项目管理等功能. Coding提供社会化协作功能,包含了社交元素,为开发者提供技术讨论和协作平台. 一.创建项目 注:选择公开 点击创建之后 获取页面HTTPS或SSH地址 二.Clone项目到本地 $ git clone https://coding.net/itmyhome/blog.git blog 三.推送代码 如果已有hexo博客代码 放在blog目录下(.deploy .git除外),其他不变 修改根目

搭建hexo博客

安装Git 下载 msysgit 并执行即可完成安装. 安装Node.js 在 Windows 环境下安装 Node.js 非常简单,仅须下载安装文件并执行即可完成安装. 安装hexo 利用 npm 命令即可安装.(在任意位置点击鼠标右键,选择Git bash) npm install -g hexo 安装完成后,在你喜爱的文件夹下(如E:\hexo),执行以下指令(在H:\hexo内点击鼠标右键,选择Git bash),Hexo 即会自动在目标文件夹建立网站所需要的所有文件.创建hexo文件夹

ubuntu安装hexo博客

ubuntu下安装hexo博客 一 安装git sudo apt-get install git 二 安装nodejs 官网下载linux安装包.tar.gz文件 解压 tar zxvf 这样变可以切到该文件下执行node npm 如果要在任意目录可以访问的话,需要将node 所在的目录,添加PATH环境变量里面,或者通过软连接的形式将node和npm链接到系统默认的PATH目录下的一个,软链接方式如下 ln -s /home/kun/mysofltware/node-v0.10.26-linu

linux 搭建hexo博客

搭建环境: CentOS 6.5 1.安装git的编译包 yum -y install gcc zlib-devel openssl-devel perl cpio expat-devel gettext-devel curl autoconf 2.下载和安装Git 这里我们需要单独下载官方版本的较为新的Git安装包,即便很多人说直接在线yum install git也可以安装Git,但是默认的版本即便安装上了,以后我们需要提交版本是无法提交的.这里我下载到当前最新的2.4.6版本Git安装.

Hexo 博客 之 腾讯云部署过程

写在前面 Hexo 博客搭好了有差不多两周时间了,这期间走了很多弯路,跳了很多坑.一些坑自己 bing 到了答案,找到了解决方法,一些坑则是自己摸索出来的解决方法.现在准备写几篇关于搭建流程.搭建过程中遇到的问题和解决方法.俗话说得好,好记性不如烂键盘嘛. 暂时准备写三篇关于 Hexo 博客搭建的博文: 关于 Hexo 博客 腾讯云部署过程 关于 Hexo 博客 NexT 主题的美化插件设置 点击这里 关于 Hexo 博客 添加域名映射和 https 点击这里 本文介绍 本博客是关于 Hexo

迈出第一步,Hexo博客搭建

很早之前看到别人的博客就总想着自己之后也要搭一个,最近突然来了干劲,就开始搭起了博客.不过搭博客还真是一个累活,失败了不下十次,用了好几天的时间,感觉自己在浪费时间,但是看到现在博客终于能用了,非常开心!这里将通过这篇文章来记录搭建过程. 环境及准备 windows.git.Node.js 一.Git1.1 安装git 链接 https://desktop.github.com/ 下载后一路默认安装就行了. 1.2 配置Git 当安装完Git应该做的第一件事情就是设置用户名称和邮件地址.这样做很