javascript innerHTML img 연결

[asdfqaz74]

HTML

<button type="button" class="exchange-button exchange-button-no z-10">
      <img src="data:image/svg+xml,%3csvg%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M22.1668%2015.1644H15.1668V22.1644H12.8335V15.1644H5.8335V12.8311H12.8335V5.83105H15.1668V12.8311H22.1668V15.1644Z'%20fill='white'/%3e%3c/svg%3e" alt="" />
    </button>

JavaScript

t.innerHTML='<img src="/public/images/plusTap.svg" alt="" />'

문제점

• 배포 할 때 /public/images/ 의 경로를 못찾음.
• build 과정에서 어떻게 innerHTML 의 img 변경을 해결해야 될 지 모르겠음.

[asdfqaz74]

Rollup

Vite는 모던 프론트엔드 개발을 위한 빌드 도구로, 웹팩보다 빠른 개발 서버 시작 시간과 빌드 시간을 제공합니다.

Vite는 내부적으로 Rollup을 사용하여 프로덕션 빌드를 처리하며, 이는 이미지와 같은 정적 자원들을 JavaScript 모듈로 처리할 수 있게 해줍니다. 이를 위해서는 Vite 설정에서 적절한 플러그인을 사용해야 합니다.

플러그인 설치

Vite 설정에 이미지 처리를 위한 플러그인을 추가하려면, 먼저 플러그인을 설치해야 합니다. 이를 위해 아래 명령을 터미널에서 실행합니다.

npm install --save-dev @rollup/plugin-image

config.js 수정

import { resolve } from 'node:path';
import { defineConfig } from 'vite';
import image from '@rollup/plugin-image';

export default defineConfig({
  plugins: [image()],
  build: {
    outDir: '',
    target: 'esnext', //browsers can handle the latest ES features
    base: '/popcorn-euid/',
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        togetherBoard: resolve(__dirname, 'src/pages/togetherBoard/index.html'),
        // ... 나머지 코드
      },
    },
  },
});

이렇게 설정하면, Vite는 이미지 파일을 JavaScript 모듈로 처리할 수 있습니다. 이를 통해 이미지를 import 해서 사용할 수 있게 됩니다.

다만, @rollup/plugin-image는 SVG 이미지를 기본적으로 Base64로 인코딩합니다. 다른 형식의 이미지를 처리하려면 추가적인 설정이 필요할 수 있습니다.

JavaScript 사용 예시

import plusTapSvg from '/public/images/plusTap.svg';

function removeList() {
  const list = document.querySelector('.exchange-button-ul');

  plusButton.innerHTML = `<img src="${plusTapSvg}" alt="" />`;
  list.innerHTML = '';
}

[asdfqaz74]

하지만 innerHTML 은 금지당함. BAN