<div id="readability-page-1" class="page"><div>
 <div id="SE-9e8b72f5-f920-44bb-b473-b35b42b94b07">
 <blockquote>
 도움이 되시면 '광고'를 한번씩 눌러시면 감사하겠습니다 :)
 </blockquote>
 </div>
 <div id="SE-45696864-460f-4b2c-aee5-07e1c42df353">
 ​​개요​vite + react.js + typescript 프로젝트에서 기존 cra 에서 하던 방식으로 img src 를 사용하니 이미지를 찾을수 없다는 에러가 떴다. 한참 찾다가 괜찮은 방법을 발견하여 정리한다.​​​구조​구조는 다음과 같다. 이미지들을 모아둘 images 라는 디렉토리를 만들고 해당 디렉토리에 cat.jpg 를 위치시켰다.
 </div> <div id="SE-7a308b9c-b325-452d-b0d9-e497927d9ab8">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-7a308b9c-b325-452d-b0d9-e497927d9ab8&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyMzA0MTdfMTE1/MDAxNjgxNzIyNjIzMzU4.AZNL51VkbQ7NaKdmm4kx95cdkPKoZEbaRw4di5K0HAcg.4S1l9YwlJXDsXGfpbCKX-z1dvCBRfX8B2cuulFOLBaYg.PNG.writer0713/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2023-04-17_%EC%98%A4%ED%9B%84_6.10.20.png&quot;, &quot;originalWidth&quot; : &quot;286&quot;, &quot;originalHeight&quot; : &quot;478&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyMzA0MTdfMTE1/MDAxNjgxNzIyNjIzMzU4.AZNL51VkbQ7NaKdmm4kx95cdkPKoZEbaRw4di5K0HAcg.4S1l9YwlJXDsXGfpbCKX-z1dvCBRfX8B2cuulFOLBaYg.PNG.writer0713/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2023-04-17_%EC%98%A4%ED%9B%84_6.10.20.png?type=w800" data-width="286" data-height="478" alt="">
 </a>
 
 </div>
 <div id="SE-60dbac86-68db-4f7b-afee-cd4beab51655">
 ​​개별 import 방식​가장 간단한 방법으로는 image 자체를 필요한 파일에서 직접 import 하는 방식이다.아래 코드와 같이 import 를 통해 images 디렉토리에 있는 cat.jpg 를 직접 가져와서 그대로 src 에 넣을수 있다.간단하긴 하지만, 이미지 파일이 많거나 같은 이미지 파일을 여러 페이지에서 사용할 경우 매번 import 를 해줘야 하는 불편함이 있다.
 </div> <div id="SE-ea3c150b-0dcd-4326-a04d-e536baae9553">
 import Cat from '../images/cat.jpg';

function ImagePage() {
 return (
 &lt;&gt;
 &lt;img src={Cat} /&gt;
 &lt;/&gt;
 );
}

export default ImagePage;

 </div> <div id="SE-cca90efa-b9a2-41b8-8d19-068879aa961c">
 ​​​이미지 전용 모듈 만들기​images 디렉토리에 images.ts 를 만들고 해당 파일에 필요한 image 들에 대한 정보를 미리 만들어놓는 방식이다.
 </div> <div id="SE-0a410d3f-7ab9-4afe-8b76-a44ad41f0c3f">
 // images.ts
const IMAGES = {
 cat1: new URL('./cat1.jpg', import.meta.url).href,
 cat2: new URL('./cat2.jpg', import.meta.url).href,
 cat3: new URL('./cat3.jpg', import.meta.url).href,
 cat4: new URL('./cat4.jpg', import.meta.url).href,
};

export default IMAGES;

 </div> <div id="SE-e1bd04b8-85db-4b49-a721-29032b754194">
 이렇게 만들어놓은 image 전용 객체를 필요한 곳에서 바로 가져다 사용할수 있다.
 </div> <div id="SE-4f49125d-4ae7-4e27-a5fc-85b2e8ee19e2">
 import IMAGES from "../images/images"

function ImagePage() {
 return (
 &lt;&gt;
 &lt;img src={IMAGES.cat1} /&gt;
 &lt;img src={IMAGES.cat2} /&gt;
 &lt;img src={IMAGES.cat3} /&gt;
 &lt;img src={IMAGES.cat4} /&gt;
 &lt;/&gt;
 );
}

export default ImagePage;

 </div> <div id="SE-2353a7e3-fa94-4aa8-afa0-184cece0d9a8">
 개인적으로는 이 방식이 제일 더 나은것 같다. 한곳에서 사용하는 이미지들을 관리할수 있고, 필요없는 이미지를 지웠을때 예상치 못하게 남아있는 코드에서 에러가 발생하니 발견하기도 쉬울듯 하다.​​
 </div> <div id="SE-8b7c41d2-2e9a-4943-a025-106de9bce715">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-8b7c41d2-2e9a-4943-a025-106de9bce715&quot;, &quot;src&quot; : &quot;https://blogfiles.pstatic.net/MjAyMTAzMTlfMTU1/MDAxNjE2MTM4MjkxMjM3.dNZls450pxypmf-DDgpsXyvvHMt06U7ZQUNXnOQA43Ug.vtGD-dfDsIyabzZVoo-fdyd2AIYUoQuMT74Plq4T10Yg.JPEG.writer0713/kakao.jpeg?type=w1&quot;, &quot;originalWidth&quot; : &quot;256&quot;, &quot;originalHeight&quot; : &quot;103&quot;, &quot;linkUse&quot; : &quot;true&quot;, &quot;link&quot; : &quot;https://qr.kakaopay.com/2810060110000443710583945dc00000&quot;}">
 <img src="https://blogfiles.pstatic.net/MjAyMTAzMTlfMTU1/MDAxNjE2MTM4MjkxMjM3.dNZls450pxypmf-DDgpsXyvvHMt06U7ZQUNXnOQA43Ug.vtGD-dfDsIyabzZVoo-fdyd2AIYUoQuMT74Plq4T10Yg.JPEG.writer0713/kakao.jpeg?type=w1" alt="">
 </a>
 
 카카오페이로 후원
 </div>
 <div id="SE-d6bd9823-fdf0-4ca2-843d-6f14a118bf86">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-d6bd9823-fdf0-4ca2-843d-6f14a118bf86&quot;, &quot;src&quot; : &quot;https://blogfiles.pstatic.net/MjAyMTAzMTlfMTIy/MDAxNjE2MTM4Mzk5Mjkz.7C8k50nPce6NqNspKw4-LN2u34aGtUxhR0Wv_mZH-xQg.U1KVzLLFEU4OaZ2KhamW_jV6_a4jVmvV0V3yY0uTl_Qg.JPEG.writer0713/kakao_qr.jpeg?type=w1&quot;, &quot;originalWidth&quot; : &quot;330&quot;, &quot;originalHeight&quot; : &quot;330&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://blogfiles.pstatic.net/MjAyMTAzMTlfMTIy/MDAxNjE2MTM4Mzk5Mjkz.7C8k50nPce6NqNspKw4-LN2u34aGtUxhR0Wv_mZH-xQg.U1KVzLLFEU4OaZ2KhamW_jV6_a4jVmvV0V3yY0uTl_Qg.JPEG.writer0713/kakao_qr.jpeg?type=w1" alt="">
 </a>
 
 카카오페이 QR코드로 후원
 </div>
 </div></div>

나만의공간。

KIM JUNGHWAN

도움이 되시면 '광고'를 한번씩 눌러시면 감사하겠습니다 :) 개요 vite + react.js + typescript 프로젝트에서 기존 cra 에서 하던 방식으로 img src 를 사용하니 이미지를 찾을수 없다는 에러가 떴다. 한참 찾다가 괜찮은 방법을 발견하여 정리한다. 구조 구조는 다음과 같다. 이미지들을 모아둘 images 라는 디렉토리를 만들고 해당 디렉토리에 cat.jpg 를 위치시켰다. 개별 import 방식 가장 간단한 방법으로는 image 자체를 필요한 파일에서 직접 import 하는 방식이다. 아래 코드와 같이 import 를 통해 images 디렉토리에 있는 cat.jpg 를 직접 가져와서 그대로 src 에 넣을수 있다. 간단하긴 하지만, 이미지 파일이 많거나 같은.......

[React.js] Vite 로 만든 프로젝트 - src 이미지 설정

댓글