[React] 이미지 삽입하기

Dorong·2023년 1월 5일
0

React

목록 보기
11/29

✅ 이미지를 삽입해보쟈

🔸 css에서

  • src 폴더 내에 이미지를 넣어주고(폴더 생성해서 모으면 깔끔!)
  • 태그에 배경화면으로 설정해주기

    // css파일에서~예시코드~
    .title {
       background-image : url('./img/title.png');
    }


🔸 jsx(tsx)파일에서

  • html태그가 들어오는 함수 컴포넌트의 return문 안에서 이미지 넣어주기
  • 그런데 이 경우에는 파일 경로로 바로 사진을 지정할 수 없다!!
    => import 문법으로 반드시 import 후 변수로 넣어줘야함!!

    import titleImg from './img/title.png';

    function Test(){
       return(
           < div style = {backgroundImage : url(${titleImg})} />
                                                                        // template literal
           < img src = {titleImg} />
       )
    }


🔸 public폴더에 이미지파일 넣기

  • 사실 위 jsx 방법은 사진이 많아지면 계속해서 import 해야하는 불편함이 있다
  • 이는 public 폴더에 이미지 파일을 넣음으로써 해결할 수 있는데,
  • public 폴더에 img등 폴더 만들어 사진을 넣어준 뒤

    < img src = '/title.png' />

  • 이렇게 '/' 하나 넣어주고 파일명 써 넣으면 끝!!

❗️public 폴더 사용의 주의점❗️

  1. 사이트 경로문제
  • 메인페이지에서는 파일명 앞에 '/'만 넣어서 써도 상관 없지만,
  • 사이트 사용환경에서 경로에 따라 url이 계속 바뀌면 해당 경로를 모두 '/'앞에 맞춰 써줘야 하는 단점이 있다
  • 물론 해결법도 존재

    // create-react-app 공식문서 내용
    < img src = {process.env.PUBLIC_URL + '/title.png'} />
                            // 현재 사이트 경로 의미

  1. import 문제
  • 또, public 폴더에 넣어둔 이미지 파일은 import 문법으로 불러올 수는 없다!!
  • 그렇게 하면, 이런 오류문이 뜨는데,

    // 오류문
    Module not found: Error: You attempted to import ../public/img/title.png which falls outside of the project src/ directory.
    Relative imports outside of src/ are not supported.
    You can either move it inside src/, or add a symlink to it from project's node_modules/.

  • import는 src 폴더 범위에서만 가능하다는 이야기!!





🌟 잘못된 부분에 대한 말씀은 언제나 저에게 큰 도움이 됩니다. 🌟
👍 감사합니다!! 👍

profile
🥳믓진 개발자가 되겠어요🥳

0개의 댓글