Electron + Vite 환경에서

<img src="/assets/icon.svg" alt="icon" />

public 폴더 안에 이미지 파일을 분명히 넣었는데 빈 이미지만 나왔다.

📁 프로젝트/
├── 📁 public/
│   └── 📁 assets/
│       └── icon.svg  ← 여기 분명히 있는데 왜 안 뜨지?

그래서 찾아본 공식문서..

Asset Handling | electron-vite

Electron-vite는 Main Process와 Renderer Process의 public 폴더가 다르다!

"The asset handling feature in this guide applies to the main process. For static asset handling of the renderer process, refer to Vite's Static Asset Handling guide."

"By default, the working directory of renderers are located in src/renderer, so the public directory needs to be created in this directory."

• Main Process: /resources/ (최상위)
• Renderer Process: /src/renderer/public/

renreder에서 이미지를 사용하는데 최상위 public에 뒀으니 당연히 안 보이는 거였다.

📁 프로젝트/
├── 📁 public/  ← 최상위 public 말고
└── 📁 src/
    └── 📁 renderer/
        └── 📁 public/  ← renderer 안에 넣어주기
            └── 📁 assets/
                └── icon.svg

코드는 그대로 사용했다.

.vite/폴더에도 잘 저장이 되어있다

굳!

Vite 설정으로 명시적 지정

"The default public directory is named public, which can also be specified by renderer.publicDir."

참고로 vite.renderer.config.js에서 publicDir을 명시적으로 설정할 수 있다.

export default defineConfig({
  // 다른 설정들...
  root: path.resolve(__dirname, "./src/renderer"),
  publicDir: path.resolve(__dirname, "./src/renderer/public"), // ← 명시적 설정
  build: {
    outDir: path.resolve(__dirname, "./.vite/build/renderer"),
    // ...
  }
});

Main Process에서 Assets 사용법

만약 Main Process에서 이미지를 사용한다면

"It is recommended to use the ?asset suffix to import public assets.”

?asset 를 붙여서 사용하면 된다.

// Main Process - ?asset suffix 사용
// build/icon.ico?asset
import { Tray, nativeImage } from 'electron'
import appIcon from '../../build/icon.ico?asset'

아직 Main은 건들여본 적이 없어서 참고용으로 남긴다.