hexo 图片显示问题及使用typora设置图片路径
时间:2022-07-25
本文章向大家介绍hexo 图片显示问题及使用typora设置图片路径,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
hexo
本地图片显示问题
使用hexo
生成静态资源后,由于url
的问题会出现图片加载的问题,现在网上的文章及官方的解决方案大概分为三种:
- 将图片放入
source/images
目录下,每次generate
都会生成图片,在使用相对或绝对路径进行引用 - 配置
hexo
的_config.yml
文件, 将post_asset_folder
设置为true
, 这样每次new 生成一个文章时都会同步生成一个同名的文件夹,然后设置相对或绝对路径. - 使用
hexo
官方的解决方案,使用模版变量,{% asset_img slug [title] %}
但是在配置过程中发现这三种方式都多多少少存在一些问题,前两中首页跟内容页会有一个加载失败的问题,而第三种则失去了markdown
的意义.
解决方法:
设置post_asset_folder 为 true, 安装插件 asset-image
npm install https://github.com/CodeFalling/hexo-asset-image
设置图片为相对路径
hexo clean && hexo generate && hexo s 运行查看
效果如下:
hexo s
后测试
配置typora
进行本地图片的粘贴及正常显示
设置typora
,图像
以后直接粘贴图片就可以自动保存到 hexo 配置的 post_asset_folder 文件夹里,自动渲染了
注意修改图片路径中的 为 / ,并且不带 .
或者./
直接写目录/图片
此种方式如有文件夹中存在中文则会url
转码,也会显示不正常,解决方法: new
文件时使用英文名,手动设置文章标题即可
- Session和Cookies的基本原理
- 浅析Numpy.genfromtxt及File I/O讲解
- 损失函数详解
- 排查Java的内存问题
- 使用两种方法让 ASP.NET Core 实现遵循 HATEOAS 结构的 RESTful API
- 设计模式六大原则(5):迪米特法则
- Selenium2+python自动化61-Chrome浏览器(chromedriver)
- 区块链可以减少社会不平等吗?
- 【干货】不止准确率:为分类任务选择正确的机器学习度量指标(附代码实现)
- python爬虫beautifulsoup4系列1
- 区块链入门教程
- python爬虫beautifulsoup4系列2
- python爬虫beautifulsoup4系列3
- 多元回归模型
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JavaScript 技术篇-js通过xpath获取dom节点,js校验xpath唯一性。
- Python 错误使用tuple问题:TypeError: 'tuple' object does not support item assignment. 原因及解决办法
- E-BERT,电商领域语言模型优化实践
- PyQt5 技术篇-透明窗口设置方法,窗口透明度的设置
- 为hexo增加gitalk评论系统
- Python 技巧篇-用print打印输出但不换行方法
- gitalk 自动初始化
- 给hexo申请证书并设置https
- Python 面向对象-如何查看类的父类,外部如何获取类的名字
- Python操作excel:用xlwt设置excel单元格背景颜色,给字体加粗。【附】颜色表
- Python+selenium 自动化-获取当前页面的url地址,打开指定的url地址
- PyQt5 技术篇-窗口置顶不生效解决办法,setWindowFlags()设置不生效解决办法
- 使用hooks自动监测git仓库更改并拉取
- 重新部署hexo
- 关于前端哈希加密密码的思考