Hexo_链接图片失败


Hexo_链接图片失败

当写文章需要插入图片时,执行

![图片描述](图片链接 "图片标题")

但是,在预览或上传云端后图片不能被加载出来,并提示错误信息

the requested content connot be loaded. please try again later

这是因为hexo无法识别markdown链接图片中的图片地址,需要安装hexo组件hexo-filter-image来自动为hexo中的图片映射绝对路径。

打开vscode,在终端命令行中执行

    npm install --save hexo-filter-image

安装组件后在hexo配置文件_config.yml中找到

post_asset_folder: false

将false改成true并增加两行

post_asset_folder: true
filter_image:
  log: true

Note:
1、由于本身Hexo带有缓存会导致插件第一次使用可能会出现无效果,请使用hexo clean清除缓存后即可正常使用;
2、图片链接尽量不要出现中文。


参考

[1] hexo文章图片加载不出来
[2] 个人博客地址

### Hexo Landscape 主题图片配置教程 #### 修改主题配置文件 对于Hexo及其Landscape主题,为了更好地管理博客内的图片资源,在`_config.yml`中可以设置一些选项来优化图片加载体验。如果要针对特定的主题如Landscape做进一步定制化调整,则需要编辑位于主题目录下的 `_config.yml` 文件[^1]。 ```yaml # Excerpt from _config.yml within the theme directory for image settings. image_lazyload: true # 启用懒加载功能提高网页性能 photo_swipe: true # 开启相册浏览效果增强用户体验 ``` 上述代码片段展示了如何启用图片懒加载(lazy load)特性以及照片墙(swipe gallery)视图模式,这有助于提升页面响应速度并提供更好的视觉交互感受[^2]。 #### 文章内嵌入图片的方法 当撰写新文章时,可以通过如下方式插入本地存储或是网络链接形式存在的图像: - **使用Markdown语法** ```markdown ![描述文字](/images/example.jpg "可选标题") ``` - **利用HTML标签** ```html <img src="/images/example.png" alt="替代文本"> ``` 这两种方法都可以很好地兼容于Hexo的渲染机制,并且能够被正确解析成最终发布的静态站点的一部分[^3]。 #### 自定义图片路径与上传策略 考虑到实际应用场景下可能涉及到大量多媒体素材管理和分发的需求,建议创建专门用于存放图片资料的子文件夹(例如`sites/images`),并通过适当的方式将其纳入版本控制系统之中以便维护和共享[^4]。 此外,还可以借助第三方云服务提供商实现更高效的媒体托管方案;只需按照对应平台给出的操作指南完成必要的授权绑定流程之后即可轻松获取外链地址供内部引用调用了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值