# 图片相关配置

## 1.主页显示的文章的封面图片相关配置

### 1.1 文章的图文在一个目录结构且文章文件名为index开头，.md结尾时:
<img src="image loading.webp" alt="文章的图文在一个目录结构" loading="lazy" style="width:100%; height:auto; border-radius:8px;">

封面图使用的代码配置:

```markdown
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
<img src="image loading2.webp" alt="封面图路径为assets" loading="lazy" style="width:100%; height:auto; border-radius:8px;">

封面图使用的代码配置:无需特定文件名

```markdown
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;">
插图使用的代码配置:实际效果⬆👆

```html
<img src="image loading3.webp" alt="图文一个目录插图" loading="lazy" style="width:100%; height:auto; border-radius:8px;">
```

注意使用markdown语法:文件名有空格即使用""了任然无法显示图片
```markdown
![图文一个目录插图]("image loading3.webp")
```
![图文一个目录插图]("image loading3.webp")

或者使用markdown语法:注意文件名用了-连接
```markdown
![图文一个目录插图](image-loading3.webp)
```
![图文一个目录插图](image-loading3.webp)

或者使用markdown语法:注意文件名用了_连接
```markdown
![图文一个目录插图](Chinese_Beauty.webp)
```
![图文一个目录插图](Chinese_Beauty.webp)


## 2.2 文章的插面图路径为X:\oklifeme\static\images\xxx.webp
       文章的文件路径为X:\oklifeme\content\posts\Code Art Studio\image\image-loading\index.zh-cn.md
插图使用的代码配置:图片无需特定文件名
```html
{{< image src="/images/文尾配图水墨画图片1740.webp" caption="" src_s="/images/文尾配图水墨画图片1740.webp" src_l="/images/文尾配图水墨画图片1740.webp" >}}
```

实际效果⬇👇

{{< image src="/images/文尾配图水墨画图片1740.webp" caption="" src_s="/images/文尾配图水墨画图片1740.webp" src_l="/images/文尾配图水墨画图片1740.webp" >}}

注意：不能用如下语法，实际效果无法显示图片
```html
<img src="images/文尾配图水墨画图片1740.webp" alt="文尾配图水墨画图片" loading="lazy" style="width:100%; height:auto; border-radius:8px;">
```
<img src="images/文尾配图水墨画图片1740.webp" alt="文尾配图水墨画图片" loading="lazy" style="width:100%; height:auto; border-radius:8px;">


***
{{< admonition type=success title="希望我写的每一个字，成为我自己和某个人活下去、拼下去的力量。" open=true >}}
“技术终归是工具，而我们用它守护的，是每一个深夜仍愿点灯前行的人。” 

本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明来自https://oklife.me。
{{< image src="/images/文尾配图水墨画图片1740.webp" caption="" src_s="/images/文尾配图水墨画图片1740.webp" src_l="/images/文尾配图水墨画图片1740.webp" >}}
{{< /admonition >}}
