图片相对路径获取出错

---
title: template
tags:
date: 2024-12-11 09:55:00
# 封面图
# cover: assets/Nichijou.webp
# gallery post（画廊类型文章）
# 若未设置cover，则使用photos中第一张图片作为封面图
photos:
  - /assets/高松灯.webp
  - /assets/Kirby.jpg
  - https://wallhalla.com/wallpaper/83/variant/preview/2xl
---

可以看到这篇 post 的封面会使用photos的第一张图片，即/assets/高松灯.webp

该文件目前位于/source/_data/assets/高松灯.webp目录下，但是获取错误：

{height=200px}

可以看到浏览器直接将相对路径拼接在协议后面请求，于是报错，且封面为空：

{height=200px}

但将后缀改为.jpg即/assets/高松灯.webp=>/assets/高松灯.jpg，则可以获取：

{height=200px}

{height=200px}

所以很奇怪，怀疑可能和_config.yml中的image配置有关：

image:
  enable: true # 开启图片预处理和自动 WebP 化
  options:
    avif: false
    webp: true # 预留配置项，现版本无作用
    quality: 80 # 质量，支持1-100的整数、lossless或nearLossless
    effort: 2 # CPU 工作量，0-6之间的整数(越低越快)
    replaceSrc: true # 自动替换生成html中的本地图片链接为webp链接
    # 我们更建议使用 Service Worker 来在用户侧实现 replaceSrc 的功能，这将能够以一种侵入式更小的方式实现链接替换
  exclude:

:::success
解决方案：每次修改完都需要执行hexo cl和hexo g重新生成静态文件再启动项目
:::

启用 replaceSrc 配置项导致线上项目获取 webp 文件出错

_config.yml配置文件中有image这样一个配置，启用后可以对图片进行 webp 化

修改里面的replaceSrc配置则可以直接将插入的图片替换为对应的 webp 文件
例如，我插入的：

public中生成的：

{height=500px}

项目中请求的：

但是通过hexo cl，hexo g以及hexo d部署到Github Page之后，发现请求失败，原因是仓库中没有对应的webp文件，也就是没有推送上去

:::success
解决方案：执行完hexo cl和hexo g之后，需要再执行hexo s，再执行hexo d即可
:::

:::info
原因解释：hexo g执行完之后，public只有原生图片，而webp文件则是通过hexo s生成的，所以执行完hexo s之后目录里面才会存在webp格式
:::