## 前提
- 画像ファイルはすべて `<root>/public/attachments/` ディレクトリ配下に置く
- 特に **`public` 配下はシステム制約上必須**
- そうしないとデプロイしたときに参照できない
### 環境
| 対象 | バージョン |
| ---------- | ------- |
| [[Slidev]] | 52.15.2 |
## 一覧
| 対象 | パスの開始 |
| ---------------------------------- | ----------------------- |
| [[#HTMLの `src` 属性]] | `./public/attachments/` |
| [[#Vueファイル内の `src` 属性 に渡されるprops]] | `./attachments/` |
| [[#フロントマターのプロパティ]] | `/attachments/` |
| [[#Markdownの画像リンク]] | `/attachments/` |
| [[#CSSの `url`]] | `/attachments/` |
## フロントマターのプロパティ
**`/attachments/` 開始** にする。
```yaml
background: /attachments/sample.webp
```
以下はすべてNG。
```yaml
background: ./attachments/sample.webp
background: attachments/sample.webp
background: ./public/attachments/sample.webp
background: /public/attachments/sample.webp
background: public/attachments/sample.webp
```
## HTMLの `src` 属性
**`./public/attachments/` 開始** にする。`img` 以外に `source` タグなども同様。
```html
<img src="./public/attachments/sample.webp" />
```
以下はすべてNG。
```html
<img src="/public/attachments/sample.webp" />
<img src="public/attachments/sample.webp" />
<img src="./attachments/sample.webp" />
<img src="/attachments/sample.webp" />
<img src="attachments/sample.webp" />
```
> [!hint]- 警告は無視してよい
> `pnpm dev` `pnpm build` には差し支えないのでスルーで問題ない。逆に `/public` を削除するとビルドエラーになる。
>
> ```warning
> Files in the public directory are served at the root path.
> Instead of /public/attachments/colot.mp4, use /attachments/colot.mp4.
> ```
>
> たとえば
>
> ```html
> <div class="h-140 overflow-hidden">
> <img src="./attachments/cat-minerva.webp" class="block" />
> </div>
> ```
>
> とすると
>
> ```error
> [UNRESOLVED_IMPORT] Could not resolve './attachments/cat-minerva.webp' in slides.md__slidev_11.md
> ╭─[ slides.md__slidev_11.md:2:24 ]
> │
> 2 │ import _imports_0 from './attachments/cat-minerva.webp'
> │ ────────────────┬───────────────
> │ ╰───────────────── Module not found.
> ```
## Vueファイル内の `src` 属性 に渡されるprops
**`./attachments/` 開始** にする。
```html
<Bubble image="./attachments/sample.webp" />
```
以下はすべてNG。
```html
<Bubble image="./public/attachments/sample.webp" />
<Bubble image="/public/attachments/sample.webp" />
<Bubble image="public/attachments/sample.webp" />
<Bubble image="/attachments/sample.webp" />
<Bubble image="attachments/sample.webp" />
```
`components/Bubble.vue` の実装イメージ。
```html
<script setup lang="ts">
defineProps<{
image: string;
}>();
</script>
<template>
<img :src="image" />
</template>
```
## Markdownの画像リンク
**`/attachments/` 開始** にする。
```markdown
```
以下はすべてNG。
```markdown
```
## CSSの `url`
**`/attachments/` 開始** にする。
```css
url("/attachments/sample.webp");
```
```css
url("./attachments/sample.webp");
url("attachments/sample.webp");
url("./public/attachments/sample.webp");
url("/public/attachments/sample.webp");
url("public/attachments/sample.webp");
```