# VuePressメモ. 05. 画像の貼り付けについて

# VSCode 拡張機能を活用したフロー

VSCode の拡張機能 Paste Image を使うと、次のようにスクショが貯められるので便利。

![](/z/img/AWSのサービスの関係.20210823_214141.png)

img/ ディレクトリは .vuepress/public/ フォルダに配置すると、参照可能になる

sample2.png

# 画像のパスの問題

  • VS Code
    • /img/ と書いておくとプロジェクトの直下の img/ ディレクトリを参照する
  • VuePress
    • /ZZZ/img/ と書く必要がありそうだ
    • ( config.jsbase: 'ZZZ' と設定した場合の話 )

このような差があって都合が悪い。
(下記URLにあるのは、勝手に解決してくれる話かと思ったが、違いそう)

https://vuepress.vuejs.org/guide/assets.html#public-files (opens new window)

仕方ないので、ビルド用シェルの中で置き換えることにした。

# リンクの先頭に base を差し込む
find $DST_DIR -type f -name '*.md' -print0| xargs -0 -r perl -pe 's%\]\(/%](/z/ZZZ/%' -i

# 画像のファイル名の問題

日本語ファイル名だと、表示できないっぽい。
でも、生成された html を見るに、URI Encode はされてそう。

VuePressメモ.サンプル画像.png

localhost (や VSCode) では表示されるが、コンパイルしてアップすると出ない。

→ localhost だと表示されるが、アップすると表示されない、てとこで気づいた
→ 「プ」が問題だった。

VuePressメモ.サンル画像.png

ファイル名から「プ」をなくした版

→ Mac版のファイル名の問題で、いわゆる「正規化」して揃えれば良いのは分かるが、
めんどくさくなってきたので運用(「ファイル名に半濁点は使わない」)で回避する。

[ 📩 ご意見 ]