图片相关配置
关于博客网站图片的所有知识
目录
1.主页显示的文章的封面图片相关配置
1.1 文章的图文在一个目录结构且文章文件名为index开头，.md结尾时:
封面图使用的代码配置:
resources: # resources字段用于定义页面资源，包括特色图片
- name: "featured-image" # 定义文章内显示的特色图片资源
src: "featured-image.webp" # 文章内显示的封面大图路径
- name: "featured-image-preview" # 定义主页列表页显示的特色图片预览资源（通常为缩略图）
src: "featured-image-preview.jpg" # 主页显示的封面小图缩略图路径1.2 文章的封面图路径为X:\oklifeme\static\images\xxx.webp
文章的文件路径为：X:\oklifeme\content\posts\willpower\20250926-day1-01
封面图使用的代码配置:无需特定文件名
featuredImagePreview: "/images/20250926-day1-01.webp" # 定义主页列表页显示的特色图片预览资源（通常为缩略小图）
featuredImage: "/images/20250926-day1-01.webp" # 定义文章内显示的封面大图2.文章内的插图相关设置
2.1 文章的图文在一个目录结构且文章文件名为index开头，.md结尾时:
插图使用的代码配置:实际效果⬆👆<img src="image loading3.webp" alt="图文一个目录插图" loading="lazy" style="width:100%; height:auto; border-radius:8px;">或者使用markdown语法:
2.2 文章的插面图路径为X:\oklifeme\static\images\xxx.webp
文章的文件路径为X:\oklifeme\content\posts\Code Art Studio\image\image-loading\index.zh-cn.md
插图使用的代码配置:图片无需特定文件名
实际效果⬇👇
注意：不能用如下语法，实际效果无法显示图片
<img src="images/文尾配图水墨画图片1740.webp" alt="文尾配图水墨画图片" loading="lazy" style="width:100%; height:auto; border-radius:8px;">
希望我写的每一个字，成为我自己和某个人活下去、拼下去的力量。
“技术终归是工具，而我们用它守护的，是每一个深夜仍愿点灯前行的人。”
本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明来自https://oklife.me。