Hexo添加图片

 

前提:修改_config.yml配置文件post_asset_folder项为true
创建博客是使用命令创建 hexo new Hexo添加图片
使用完命令之后,在source/_post文件夹里面就会出现一个“Hexo添加图片.md”的文件和一个“Hexo添加图片”的文件夹
以下图片代码段 


目录结构 

图片传不上去,看下面!

https://xxjzd.top/2020/08/26/Hexo%E6%B7%BB%E5%8A%A0%E5%9B%BE%E7%89%87/

<think>好的,用户遇到了Hexo博客中图片不显示的问题,需要解决方案。我需要根据提供的引用内容来整理答案。首先,用户提到的几个引用都是关于Hexo图片显示问题的不同解决方案,我需要逐一分析并总结出有效的几种方法。 首先,引用[1]提到了使用hexo图片格式,也就是通过安装插件如hexo-asset-image,将图片存放在与文章同名的资源文件夹中。这种方法可能涉及路径处理,需要检查插件是否安装正确,以及路径配置是否正确。另外,用户可能需要注意相对路径的问题,特别是在不同环境下(如本地和部署后)的路径转换。 然后,引用[2]指出在Typora中图片可能无法预览,但生成后可以正常显示。这可能是Typora的本地路径和Hexo生成的路径不一致导致的。建议用户检查Typora中的图片路径设置,确保使用绝对路径或者在Typora中启用兼容Hexo的设置。同时,确保生成后的路径正确,可能需要配置Typora的图片存储位置与Hexo的资源文件夹一致。 引用[3]提到用户尝试了多种方法未果,但最终成功,可能涉及多个因素的调整。这里需要综合前面的方法,比如正确配置_config.yml中的post_asset_folder为true,并确保使用正确的Markdown语法。另外,可能存在文件名或路径中包含空格或特殊字符导致的问题,需要提醒用户检查文件名规范。 引用[4]讨论了在source文件夹下新建图片目录带来的结构混乱问题,以及路径中的乱码现象。建议用户统一资源管理,可能使用子目录来分类图片,避免直接放在source下。乱码问题可能与Hexo或插件的编码处理有关,确保使用英文命名或正确编码的中文路径,或者更新相关插件到最新版本。 接下来,我需要将这些整理成结构清晰的解决方案,分步骤说明。确保每个方法都明确步骤,并提示可能出现的问题和解决办法。例如,使用资源文件夹需要安装插件,配置正确,路径引用方式是否正确。同时,提醒用户检查Typora的设置,确保本地预览和生成后的路径一致。此外,对于绝对路径方法,需要解释如何配置URL,以及在Markdown中的正确写法。 还需要考虑用户可能遇到的常见问题,比如插件安装后未生效,这可能是因为依赖问题或配置错误。建议用户检查插件是否兼容当前Hexo版本,并正确启用。另外,图片缓存问题可能导致本地服务器显示旧内容,提醒用户清理缓存并重新生成。 最后,生成相关问题时要围绕Hexo图片显示问题展开,可能涉及插件使用、路径配置、Typora兼容性、部署后的路径处理等。确保问题具有针对性,帮助用户深入理解可能遇到的后续问题。</think>以下是解决Hexo博客图片无法显示的完整方案,按优先级排序: ### 一、使用Hexo资源文件夹(推荐方案) 1. 在`_config.yml`中启用资源目录: ```yaml post_asset_folder: true ``` 2. 安装资源处理插件: ```bash npm install hexo-asset-image --save ``` 3. 创建文章时自动生成同名资源文件夹: ```bash hexo new "文章标题" # 会生成同名文件夹存放图片 ``` 4. 插入图片使用相对路径: ```markdown ![图片描述](文章标题/图片.jpg) ``` *原理:插件会自动转换本地路径为部署路径[^1]* ### 二、绝对路径方案(跨文章共用图片) 1. 在`source`目录创建`images`文件夹 2. 插入图片使用绝对路径: ```markdown ![图片描述](/images/图片.jpg) ``` 3. 需保持目录结构: ``` source ├─ _posts └─ images ``` *注意:部署后路径会自动添加博客前缀[^2]* ### 三、Typora兼容设置 1. 打开Typora偏好设置 > 图像 2. 选择"复制到指定路径": - 路径格式:`./${filename}` - 勾选"优先使用相对路径" 3. 插入图片时会自动保存到文章同名文件夹 ### 四、常见问题排查 1. **缓存问题**: ```bash hexo clean && hexo g && hexo s ``` 2. **路径验证**: 检查生成后的HTML代码中图片路径: ```html <!-- 正确示例 --> <img src="/2024/03/20/文章标题/图片.jpg"> ``` 3. **文件名规范**: - 避免中文和特殊字符 - 使用小写字母和短横线`image-01.jpg` ### 五、高级方案(CDN加速) 1. 将图片上传至图床(如阿里云OSS) 2. 直接引用绝对URL: ```markdown ![图片描述](https://cdn.example.com/image.jpg) ``` *优势:提升加载速度,规避路径问题[^4]*
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值