hexo下本地图片的加载

最新推荐文章于 2024-12-30 16:39:18 发布
最新推荐文章于 2024-12-30 16:39:18 发布
阅读量746 收藏 1
点赞数 1
分类专栏： 建站 文章标签： 经验分享
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/JYplute/article/details/105611774
版权
在使用hexo撰写markdown博客时，遇到本地图片无法在网页中显示的问题。通过官方教程，可以在source/images文件夹存放图片，并使用相对路径引用。尽管编辑器内无法预览，但发布后图片正常显示。此外，还分享了typora的快捷键使用技巧。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在刚开始写博客时，你肯定有这样的困扰

概述

hexo默认下博客都是markdown格式（以md为后缀的文件），在日常文本编辑中，我们常常需要引用图片，但是在本地应用图片时都是采用的绝对路径，在typora等可视化编辑软件下可以看到预览样式，但是一旦发布到hexo框架，访问测试网页时就显示不出来，本文专为此问题给出解决方案。

操作

官方教程：图片可统一放置在source/images目录中，并以 ![](/images/image.jpg) 方式引用

我们需要在source文件夹下创建一个images文件夹，然后将文档编辑需要的图片复制到此目录下，以

[)(/images/image.jpg)] 方式引用，虽然在编辑器内看不到预览效果，但是上传是是可见的。
在这里插入图片描述

为了增加篇幅，再来点typora适用快捷键总结

标题：ctrl+1/2/3/4/5/6由大到小，在源代码就是###…

代码：```或者~~~ 在后面加语言名字可以不需要后面再选择语言

​ ctrl+shift+k在行内插入代码

列表：直接+/-/*然后tab-----无序列表

​ 1./2./。。。tab----有序列表

表格：ctrl+t插入表格

文本：ctrl+b加粗 ctrl+i倾斜 ctrl+u下划线 ctrl+h搜索并替换

​ ctrl+L选择这一行 ctrl+D选中单词

图片：ctrl+shift+i插入图片

分割线：—加回车，如下

最低0.47元/天 解锁文章
利用Hexo在博客中插入本地图片（无需外链）|Zam9036博客
Zam9036博客
02-28 1883
前言 ​ 在用Hexo写博客的过程中我们往往需要在博客中插入图片。MarkDown中插入图片有两种方式：一种是使用外链，一种是使用本地图片。而如果使用外链图片，我们需要找好用的图床，以防图片链接不定时挂掉，这大大增加了写博客的时间成本。本地图片如果使用绝对路径会导致上传到Github上时链接不到，所以本文提供了一种利用本地图片的相对路径的方式来插入图片。 思考 ​ 我们在启用博客主题时会发现，博客...
解决Hexo的图片加载和评论问题
程序无言
09-25 1366
一.Hexo-Matery解决无法加载本地图片 步骤1 安装插件 打开Git控制台 由于npm速度比较慢，我这里使用的是cnpm淘宝的镜像 没有安装的小伙伴，可以使用npm install -g cnpm --registry=https://registry.npm.taobao.org 进行安装 输入cnpm install https://github.com/CodeFalling/hexo-asset-image – save 步骤2 修改主配置文件 找到根目录下面的_config.yml配
hexo本地相对路径图片插入的问题解决案例
weixin_45707517的博客
12-30 375
​ 通过初步搭建HEXO之后，我先加入了主题（NEXT），接下来就是发布文章，必然就是学习怎么写文章，由于运维需要插入截图方便后续查看对比，所以找了一些攻略进行测试。
hexo插入本地图片
weixin_45419466的博客
08-01 464
1.安装插件 npm install https://github.com/CodeFalling/hexo-asset-image -- save 不要使用以下这个 npm install hexo-asset-image –save 这个bug的 2.修改配置文件 设置站点配置_config.yml:将post_asset_folder: false改为post_asset_folder: true 修改之后，当我们创建一个新博客的时候，会出现一个同名的文件夹，我们需要把图片放到那个文件夹里，这里
hexo导入本地图片
qq_41706280的博客
03-02 477
复制过来又要重新引入图片代码什么的，太繁琐了 请移步 我的博客
hexo文章中插入图片
www.hohode.com
05-02 2万+
使用markdown写文章，插入图片的格式为，这里要说的是链接地址怎么写。 对于hexo，有两种方式： 使用本地路径：在hexo/source目录下新建一个img文件夹，将图片放入该文件夹下，插入图片时链接即为/img/图片名称。 使用微博图床，地址http://weibotuchuang.sinaapp.com/，将图片拖入区域中，会生成图片的URL，这就是链接地址。
hexo加载不出来图片
weixin_42231876的博客
05-21 816
必须得吐槽一下，网上搜这个问题的解决的时候大部分都是没啥用的文章，还高度一致。。。。。。稍不留神就看到17年的文章，那都是好几年前的版本了，照着做完全是浪费时间。本篇默认你已经安装好了hexo，如果没有的可以直接关掉了，先去装了且有这个问题再来看这篇文章。
Hexo添加图片
sampsonjun的博客
08-27 349
前提：修改_config.yml配置文件post_asset_folder项为true 创建博客是使用命令创建 hexo new Hexo添加图片 使用完命令之后，在source/_post文件夹里面就会出现一个“Hexo添加图片.md”的文件和一个“Hexo添加图片”的文件夹 以下图片代码段 目录结构 ...
hexo本地博客+云服务器个人博客搭建
m0_56112405的博客
04-28 1882
hexo本地博客+云服务器个人博客搭建记录一下本地搭建hexo个人博客并部署到云服务器的过程。。。本地环境是win11，云服务器是大概的流程是本地写笔记，推送到云服务器然后部署，展示给大家所以当然也可以用GitHub.io去进行部署，这是取决于各位的。。。
解决博客园添加hexo看板娘无法加载问题
bajixiang6752的博客
08-06 1785
关于添加看板娘 因为觉得作者设置的页面左下角的网易云音乐并不实用所以将其改成看板娘 但是由于太菜，不能很好的理解live2d的官方文档 数次度娘都是一些不能用的版本，不是配置少双引号，就是路径错误，看了十几个博客竟没有一个是对的 点进博客根本就没有所谓的看板娘，看页面源码也都是error 几经搜索，终于在一个小时后找到正确配置之法 下面是我的设置，具体代码在html/pageFooter...
hexo-lazyload-image:用于Hexo的lazyload图像插件
05-17
hexo-lazyload-image hexo-lazyload-image是一个hexo插件，用于使所有图像自动支持lazyload。 借助此功能，它将改善很多加载性能。 所有延迟加载图像仅在它们位于当前视口内时显示。 不必担心lazyload SEO问题，因为Google已经支持它。 我们只是。 安装 $ npm install hexo-lazyload-image --save 用法 首先从您的hexo项目的_config.yml添加配置。 lazyload : enable : true onlypost : false # optional loadingImg : # optional eg ./images/loading.gif isSPA : false # optional preloadRatio : 3 # optional, de
使用Obsidian写Hexo博客
偶尔记一下 - mybatis.io
07-05 1577
整个操作起来挺麻烦的，写到一半我都写不下去了，如果有人喜欢这种方式，或者喜欢我改造的这个博客主题，可以留言给我，我可以把主题以及整个博客整理出一个框架开源出来方便大家使用。直接基于现成环境写的时候，上面所有这些操作都是配置好的，你可以把重点放在内容创作上。博客地址：大家还可以说说你们打开博客的速度怎么样，当我第一篇发出去后，首批打开博客的人说加载速度很慢，图片很多，而且都比较大，打开慢就避免不了。文章内容的图片自动转换为 webp 格式，这种格式的压缩率很高，图片瘦身效果很好。
hexo图像转接--hexo引用本地图片无法显示
lijieling123的博客
05-15 153
在文章中引用本地图片时总是显示不出来，只能先贴到csdn之后复制URL，先土土地这样用吧，这样还不占本地内存
[2024] hexo图片无法加载究极解决方案
lengcs的博客
11-16 1862
许多朋友在使用hexo框架结合github搭建自己的博客网站的时候，在本地写好md文档，当hexo s本地运行的时候，图片无法显示，hexo d上传到Github上的时候也是如此。原因就是，能理解。但是为什么我们本地hexo s调试的时候，图片还显示不了呢？原因就是展现在网站上的不是md文档，而是html文件，对于图片的引用，，也就是当我们运行hexo g的时候做的事情，而其正常实现需要用到一个插件（这是个重点，后面会说）
hexo配置本地图片
逆光世间
11-13 356
1. 修改配置文件1 2 3 vi /blog/_config.yml post_asset_folder: true 2. 安装hexo-asset-image1 2 在hexo目录执行 npm install https://github.com/CodeFalling/hexo-asset-image --save 3. 使用1 hexo n "git...
hexo引用本地图片无法显示
热门推荐
Ericam_
11-15 4万+
最近重新开始用起hexo，但是发现在文章中引用本地图片时总是显示不出来。 问题如下图所示。 花费了许久时间才解决这个问题。 因此将一些解决经验整理出来，希望能帮助到大家。 一、插件安装与配置 首先我们需要安装一个图片路径转换的插件，这个插件名字是hexo-asset-image npm install https://github.com/CodeFalling/hexo-asset-image...
个人博客搭建 图片加载 hexo
CodeSniperYang的博客
05-12 487
搭建个人博客 经过千辛万苦，终于把自己的个人博客搭建好了，什么 千辛万苦，不过就是一个几个小时而已，再加上git的下载， 幸好提前一天注册了GitHub的账号，并且玩了一下，才会搭建的这么简单。 太开心了啊，哈哈~ 下面是基于github平台的个人博客的搭建的命令，不需要购买服务器和域名 有空详细讲一讲自己搭建完成的第二天干了什么事情。 (关于md的图片插入，我还没有完全搞懂) 准备工作一定要做好： git 在此之前，要下载git，git的下载可以去csdn看一看，有国内的下载地址，国外的真的是太慢了，真的
hexo-添加图片，音乐，链接，视频
博採眾長
06-03 2万+
如果实在搞得头晕直接去简书写文章，再把简书生成的md文章复制过来就好了（简书是个不错的Markdown在线编辑器），马克飞象，专为印象笔记打造的 Markdown 编辑器，typora 也是不错的 1.首先 刚刚搭博客，很多都不懂，就连插入图片的路径问题都把我整的要命。。。（我用的Sublime Text 3编译器） 下面讲讲： 1.1 设置站点配置_config.yml pos...
Hexo 添加图片——不用插件，超简单
像我这样的人
03-14 8244
当使用Hexo创建文件搭建博客的时候，就会遇到图片插图，以及插入的图片无法显示的问题，差不多网上大多数的解决方案就是第一种（但我本人没使用这个方案） 第一种 找到Hexo下的_config.yml里的post_asset_folder，把这个选项从false改成true 在Hexo目录下打开Git Brsh，执行一个下载上传图片插件的命令npm install hexo-asset-image --save。 继续在Git Brsh下利用hexo n "xxxx"来生成md的文件（""里的内容填
hexo填入图片链接
最新发布
04-03
#### 方法一：使用 Markdown 的语法插入本地图片 如果图片存储在本地路径下，可以按照如下方式进行插入： ```markdown ![替代文字](相对路径或绝对路径) ``` 这里的 `替代文字` 是当图片无法加载时显示的文字说明，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值