이미지 자동 업로드

요약

• image auto uploader 플러그인과 Picgo를 통해 github에 사진을 자동 업로드하고 해당 사진의 raw 파일 url 경로를 가져오기

---

설치 필요사항

Obsidian 플러그인

커뮤니티 플러그인에서 Image auto uploader 플러그인 설치(개발자 renmu)

Github 리포지토리

Repository 생성

1. GitHub 접속 → 우측 상단 + → New repository 클릭
2. Repository name: obsidian-image, Public 설정 → Create repository

Personal Access Token 발급

1. GitHub → Settings → Developer settings → Personal access tokens → Tokens (classic)
2. Generate new token → Fine-grained token 선택
3. Repository access: obsidian-image 선택, Permissions: Read & write, Expiration: 무기한
4. Generate token 클릭 → 토큰 값 복사 (한 번만 표시됨)

토큰 값은 PicGo config.json에 입력! (노출되지 않도록 주의)

Node.js 및 PicGo 설치

brew install node
npm install -g picgo
picgo -v
which picgo  # 예시: /opt/homebrew/bin/picgo

---

환경설정

Picgo Github 업로더 설정

mkdir -p ~/.picgo
nano ~/.picgo/config.json

{
  "picBed": {
    "uploader": "github",
    "github": {
      "repo": "username/obsidian-image",
      "branch": "main",
      "token": "YOUR_PERSONAL_ACCESS_TOKEN",
      "path": "images/",
      "customUrl": "https://raw.githubusercontent.com/username/obsidian-image/main"
    }
  },
  "picgoPlugins": {}
}

플러그인 세팅

• Picgo-Core 로 설정
• Picgo-Core path: which picgo 로 확인한 경로 입력
• image size suffix: 가로 500, 세로 300 기본값 설정 (|500x300)

---

html 코드로 변환

![file.png](url) 경로를 html 코드로 자동 변환하는 템플릿 파일 생성

const editor = tp.file.cursor;
const selection = tp.file.selection();
 
if(!selection) {
    tR += "선택 영역이 없습니다.";
} else {
    const pattern = /!\[.*?\|(\d+)x(\d+)\]\((.*?)\)/g;
    const converted = selection.replace(pattern, (match, width, height, url) => {
        return `<div align="center">\n  <img src="${url}" width="${width}" height="${height}" />\n</div>`;
    });
    tR += converted;
}

![file.png|widthxheight](url) 선택 후 템플릿 단축키 입력하면 아래와 같이 변환:

<div align="center">
  <img src="url" width="width" height="height" />
</div>

---

활용

1. 로컬에서 이미지 복사 후 옵시디언 노트 내 붙여넣기
2. image auto uploader 로 github에 이미지 자동 업로드
3. github raw파일 url 경로로 이미지 경로 생성 (![file.png|widthxheight](url))
4. 이미지 경로 선택 후 template 플러그인 단축키로 html 코드로 전환

---

참고사이트