vite 로 빌드시 svg이미지가 깨지는 이슈 발생

vite 로 빌드시  svg 이미지가 깨지는 이슈 발생

 

public 디렉토리는 정적 파일을 저장하는 데 사용되며, Vite가 처리하지 않고 빌드 시 자동으로 복사됩니다.
따라서 이미지 파일 경로를 설정할 때 public 디렉토리를 제외해야 합니다.

 

<button
   className={classes['searchButton']}
   type="submit"
   aria-label="검색 버튼"
   tabIndex={0}
     >
     <img
       src="/public/assets/search.svg"
       alt="검색 버튼"
        tabIndex={0}
      />
</button>

 

해결방법:

import search from '/public/assets/search.svg';

<button
   className={classes['searchButton']}
   type="submit"
   aria-label="검색 버튼"
   tabIndex={0}
    >
    <img src={search} alt="검색 버튼" tabIndex={0} />
</button>

 

 import search from '/public/assets/search.svg'; 와 같은 방법으로 SVG 이미지를 모듈로 가져와서 사용하는 것도 가능합니다. 이 방법을 사용하면 이미지 파일 경로를 직접 입력하는 대신 모듈로 가져와서 사용할 수 있으므로, 경로 오류가 발생하지 않을 가능성이 높습니다.

 

// vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import path from 'path';
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  resolve: {
    alias: [{ find: '@', replacement: path.resolve('src') }],
  },
  define: {
    'process.env': {},
  },
  plugins: [react(), svgr()],
  server: {
    host: 'localhost',
    port: 3000,
  },
  css: {
    devSourcemap: true,
  },
});