Hexo写博客时的图片问题

github+hexo搭建的博客,先放下地址(嘿嘿嘿,其实刚搭,比较丑):

timejjc.com

为了写博客,下载了Markdown pad2   

但是!!不会用啊,得慢慢探索了 

然而,在我好不容易写了一篇博客,部署之后,发现,图片路径有问题?????

解决方法

安装一个图片插件:

npm install hexo-asset-image --save

此时,如果你已经有一个博客了,新建一个文件夹,名字和博客名完全一致,把图片放在文件夹里

打开.md文件,修改图片路径

以上所有完成后,在界面:

在空白处,右键打开 Git Bash here ,输入一下2条命令:

1. hexo clean

2. hexo g

 这时,已经生成了html文件,打开此文件:

<think>好的,我需要帮用户解决Hexo博客中音乐和图片无法显示的问题。首先,我需要分析用户提供的引用内容,看看有没有相关的解决方案。 用户提到了引用[1]关于在Butterfly主题中添加aplayer播放本地音乐,引用[2]关于Matery主题中图片的显示问题,引用[3]关于Next主题的配置,引用[4]使用jsDelivr加速图片访问。这些都是不同主题的配置方法,可能需要根据用户的具体主题来调整。 首先处理音乐无法显示的问题。引用[1]中提到需要将音乐文件放在正确的目录下,比如source/music/,并在配置文件中正确引用路径。可能用户没有正确放置文件或路径错误。另外,跨域问题也可能导致音乐无法加载,需要检查服务器配置或者使用相对路径。 然后是图片无法显示的问题。引用[2]和引用[4]都提到了图片路径问题,需要确认图片是否放在正确的目录,比如source/images/,并且在Markdown中使用正确的相对路径或绝对路径。使用jsDelivr加速,需要注意仓库名和版本号是否正确,否则图片链接会失效。 另外,用户可能需要清除Hexo缓存,重新生成静态文件,并检查服务器是否正确部署。不同主题可能有不同的配置方式,比如Next主题需要修改_layout.swig文件,而Butterfly主题可能在_config.yml中有不同的设置。 还需要考虑是否使用了正确的语法,比如HTML标签是否正确闭合,或者Markdown的图片语法是否有误。如果使用外部CDN,需要确认链接是否有效,并且资源是否公开可用。 最后,建议用户检查浏览器控制台是否有报错信息,这有助于快速定位问题所在,比如404错误或跨域错误。根据具体情况,可能需要修改配置文件、调整文件路径或更新资源链接。</think>### Hexo博客音乐/图片无法显示解决方案 #### 一、音乐播放问题 1. **本地音乐路径配置** - 将音乐文件(.mp3)放在`source/music`目录下(需手动创建) - 在主题配置文件`_config.yml`中添加: ```yaml aplayer: meting: false cdn: https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js style_cdn: https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css audio: - name: "歌曲名" artist: "歌手" url: "/music/yourmusic.mp3" # 使用绝对路径 cover: "/images/cover.jpg" # 封面路径 ``` - **注意**:Butterfly主题需启用aplayer插件[^1] 2. **跨域问题处理** - 在博客根目录`_config.yml`中添加: ```yaml url: https://yourdomain.com # 必须配置正确 ``` #### 二、图片显示问题 1. **本地图片存储方案** - 创建`source/images`目录存放图片 - Markdown中使用: ```markdown ![描述](/images/your-image.jpg) ``` - 若使用Matery主题,需检查HTML模板中的路径配置[^2] 2. **CDN加速方案** - 使用jsDelivr加速(适合Github仓库): ```markdown ![图片描述](https://cdn.jsdelivr.net/gh/用户名/仓库名@版本号/图片路径) ``` - 示例: ```markdown ![demo](https://cdn.jsdelivr.net/gh/username/repo@1.0/images/demo.png)[^4] ``` #### 三、通用检查步骤 1. **路径验证** - 浏览器按F12打开控制台,查看资源加载状态 - 确认报错类型:404(路径错误)或403(权限问题) 2. **缓存清理** ```bash hexo clean && hexo g && hexo s ``` 3. **主题配置差异** - Butterfly主题:检查`source/_data/aplayer.yml` - Matery主题:验证`post_meta.html`模板路径[^2] - Next主题:确认`_layout.swig`中的资源加载[^3] #### 四、进阶调试 1. **强制刷新策略** - 在图片URL后添加版本号: ```markdown ![图片](/images/logo.png?v=1.0) ``` 2. **网络协议适配** - 混合内容问题需统一使用HTTPS: ```html <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> ```
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值