图片访问问题解决
博客图片的存储可是采用图床或则直接发布到github 仓库,下面介绍几种发布到github仓库的方式。
仓库存储图片面临发布之后图片访问失败的问题， 下面主要解决博客发布后图片访问路径
一般hexo博客部署发布后根据配置文件_config.xml属性 permalink: :title/ #default :year/:month/:day/:title/
访问路径应该类似 **http://localhost:4000/hexo2/2024/07/04/test/**包含日期信息。而图片的访问失败就和这个自动生成的日期路径有关系。
方法一
安装插件 hexo-asset-image
步骤
安装插件
npm install https://github.com/CodeFalling/hexo-asset-image --save配置文件
_config.yml` 文件中的`post_asset_folder` 选项设为 `true
目的 可以生成 md文件的同名文件夹修改 typora 偏好设置 在统同级博客文件下 生成博客同名文件夹存储照片
插件作用 在生成静态文件时，可已经缺失的 日期路径进行补充
插件hexo-image-link
原理: 在Hexo启用
post_asset_folder: true选项后，将Markdown语法的图片路径转换为asset_img的方式，使图片能够在使用typora编辑和hexo预览发布时都能正常显示。https://github.com/cocowool/hexo-image-link
就如补充中提到的 如果你不需要频繁的更换文件名, 也是可以用这个插件的。
方法二
利用hexo 自带插件 hexo-renderer-marked https://hexo.io/zh-cn/docs/asset-folders
修改配置文件
_config.yml
post_asset_folder: true
marked:
prependRoot: true
postAsset: true配置
Front-matter
typora-root-url: test (md文件名同级目录)启用后，资源图片将会被自动解析为其对应文章的路径。
例如： image.jpg 位置为 /2020/01/02/foo/image.jpg ，这表示它是 /2020/01/02/foo/ 文章的一张资源图片，  将会被解析为 <img src="/2020/01/02/foo/image.jpg"> 。
方法2原理和方法1类似 都是在生成静态文件时自动补全缺失的日期路径
但是 这种方式需要图片路径严格按照 ==image.jpg== 形式;
不能是这种形式 ==/image.jpg== (typore 自动插入图片即是这种形式)。
所以没有使用该种方式
方法三
在typora菜单栏点击 格式->图像->设置图片根目录，将hexo/source作为其根目录即可。
这一步就是在文件 Front-matter 中添加属性 ==typora-root-url: ..==
一定要先设置了图片根目录后再插入图片，否则图片路径会不正确喔！
将静态文件放入 hexo source 文件夹下,免去了日期路径的困扰,
而且在此路径下也避免了 _post博客文件中静态资源部署需要 先clean 在 generate的繁琐。
方式四
既然问题是因为日期路径引起的那么不使用日志路径不就可以了吗.
_config.yml
permalink: :title/ #default :year/:month/:day/:title/修改 typora 图片偏好设置 为 复制到指定路径 ./${filename}
方法四设置简单,但是静态文件发布后 所有的文件夹都集中在一起, 如果文件名区分的不好,可能会造成post 和 page重名,
建议文件取名的时候添加日期属性
2024-07-04test.md或则采用方法三。
补充
总是有新问题出现, 此种方式只能解决
_posts文件夹下的图片链接问题 , 如果在_posts下新建文件夹,就会失效,例如: 我在 _posts 下新建的 hexo文件夹 存储hexo相关的博文 就会造成图片失效
当然也有解决办法
Front-matter
typora-root-url: .. 图像根路径设置为`_post`即可但是这样总是临时措施,如果想变回 时间访问路径
permalink: :title/ #default :year/:month/:day/:title/还是会有问题所以结论是 方法不太完美.
补充二
如果md 文件名变动了 例如 test.md 变成了 testnote.md , 在
hexo g生成 文件时,public 文件夹中不会生成 test 文件夹的照片,只会有 testnode文件夹下的照片,
- 推测hexo根据md文件名来生成文件夹
补充三
最后采用 方案三;
之前一直在研究方案四, 因为typero设置图片复制时放在md同级目录下,迁移时方便,
现在老是产生一些图片访问失败的问题 只能采用方案三了.
补充四
- 新问题出现了,图片本地能够编辑, 如过在 github仓库编辑md 图片不会显示
- wechat
- alipay
