C 插入图片

C-1 插入本地图片

我想实现什么： 把我电脑上的图片放进幻灯片。

简洁写法：

![图片说明](./Fig/chart.png)

推荐写法： 先建好文件夹结构，再用相对路径：

my_slides/
├── slides.md
└── Fig/
    └── chart.png

![回归系数图](./Fig/chart.png)

常见问题：

图片不显示 → 检查路径是否正确，文件名区分大小写（Chart.png ≠ chart.png）
移动文件夹后图片消失 → 用相对路径就不会有这个问题，绝对路径会

更多图片问题见 C-5。

C-2 调整图片尺寸

我想实现什么： 让图片变大或变小，不要占满整页。

简洁写法（按宽度）：

![width:400px](./Fig/chart.png)

按百分比：

![width:60%](./Fig/chart.png)

按高度：

![height:300px](./Fig/chart.png)

同时限制宽高（不拉伸）：

![width:400px height:300px](./Fig/chart.png)

推荐写法： 一般用 width 的百分比，这样在不同尺寸幻灯片上都能保持比例：

![width:70%](./Fig/chart.png)

图片居中：

Marp 图片默认左对齐。居中有两种方法：

方法一，用 HTML 包住：

<div style="text-align:center;">

![width:60%](./Fig/chart.png)

</div>

方法二，全局 CSS（所有图片居中）：

<style>
img {
  display: block;
  margin: 0 auto;
}
</style>

提示词

我的 Marp 幻灯片里有一张图片，我想让它宽度为幻灯片宽度的 65%，并且居中显示，下方有一行 14px 的图片说明。请给我完整的代码示例。

C-3 设置背景图

我想实现什么： 把图片铺满作为幻灯片背景。

简洁写法：

![bg](./Fig/background.jpg)

调整透明度（让文字更易读）：

![bg opacity:0.3](./Fig/background.jpg)

背景图 + 文字内容：

![bg opacity:0.15](./Fig/background.jpg)

# 封面标题

副标题文字

背景图只占一侧（左图右文）：

![bg left:40%](./Fig/chart.png)

# 右边的标题

右边的正文内容

left:40% 表示背景图占左边 40%，右边 60% 用来放文字。同理，right:40% 是右边放图。

常见问题：

背景图太亮，文字看不清 → 用 opacity:0.2 降低透明度
背景图比例不对被裁剪了 → 这是正常的，Marp 会自动裁剪以填满

提示词

帮我生成一张 Marp 封面幻灯片，背景图路径 ‘./Fig/cover.jpg’，透明度 0.2，上面显示标题 “计量经济学” 和副标题 “2024年秋季学期”，{深蓝色} 文字。给我完整的代码。

C-4 图文混排

我想实现什么： 左边是文字，右边是图片（或反过来）。

推荐写法（用 CSS Grid）：

<style scoped>
.cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5em;
  align-items: center;
}
</style>

<div class="cols">
<div>

**要点一**：这是解释文字

**要点二**：这是解释文字

**要点三**：这是解释文字

</div>
<div>

![width:100%](./Fig/chart.png)

</div>
</div>

用背景图方法（更简单）：

![bg right:45%](./Fig/chart.png)

## 左边的标题

- 要点一
- 要点二
- 要点三

bg right:45% 让图片作为右侧背景占 45%，文字自然在左侧 55%。

提示词

帮我生成一张 Marp 幻灯片，左边是 3 个要点列表（文字内容我自己填），右边是一张图片（路径 ./Fig/result.png），要求左右各占 50%，图片垂直居中。给我完整代码。

C-5 图片不显示怎么办

我想实现什么： 排查为什么图片在预览或导出后看不到。

逐步排查清单：

1. 检查路径拼写

<!-- 检查这里：路径和文件名是否完全一致 -->
![](./Fig/chart.png)

文件名区分大小写：Chart.png ≠ chart.png
文件夹名拼写要对：Fig ≠ fig
后缀名要正确：.jpg ≠ .png

2. 检查文件是否真的存在

在 VS Code 左侧文件资源管理器里，确认 Fig/ 文件夹和图片文件确实在那里。

3. 确认路径是相对路径

相对路径从 .md 文件所在位置出发：

<!-- .md 文件在 my_slides/ 下 -->
<!-- 图片在 my_slides/Fig/ 下 -->
<!-- 正确写法： -->
![](./Fig/chart.png)

<!-- 错误写法（绝对路径，换电脑就不行）： -->
![](C:/Users/zhang/Desktop/my_slides/Fig/chart.png)

4. 导出 PDF 后图片不见了

重新导出，确认 slides.md 和 Fig/ 文件夹在同一个文件夹里。

5. 分享 HTML 后对方看不到图片

HTML 不嵌入本地图片。需要把整个项目文件夹（含 Fig/）一起压缩发给对方，或者改用图床。详见附录 F-3。

提示词

我的 Marp 幻灯片里图片不显示，我的文件结构是：slides.md 在 my_slides/ 下，图片在 my_slides/Fig/chart.png，我在 Markdown 里写的是 ![](./Fig/chart.png)，但预览里看不到图片。请帮我排查可能的原因。