개요

React로 웹 애플리케이션을 개발할 때 일반적으로 사용자의 관심을 끌 수 있는 시각적 요소를 포함하려고 합니다. 이러한 시각적 요소는 JPG, PNG, SVG, GIF 등을 포함한 모든 유형의 이미지가 될 수 있습니다.

이 기사에서는 React로 이미지를 가져오는 방법을 배우고 이를 달성할 수 있는 다양한 방법을 볼 것입니다.

외부 이미지와 로컬 이미지는 React 애플리케이션에서 사용하려는 두 가지 유형의 이미지입니다. 외부 이미지는 가져올 필요가 없기 때문에 우리는 이 기사에서 주로 로컬 이미지에 관심을 둡니다.

외부 이미지는 이미 외부에서 호스팅되어 URL을 통해 누구나 액세스할 수 있는 이미지인 반면, 로컬 이미지는 로컬 컴퓨터 또는 프로젝트 폴더에서만 사용할 수 있고 애플리케이션에서 사용하려는 이미지입니다.

외부에서 호스팅되는 이미지를 표시하는 방법

이미지를 가져오는 방법에 대해 알아보기 전에 다른 곳에서 호스팅되는 이미지가 HTML에서 이미지를 항상 사용했던 것과 같은 방식으로 작동한다는 것을 이해하는 것이 중요합니다. src 의 속성 img 태그 :

const App = () => {
   return (
      <div>
         <img src="https://reactjs.org/logo-og.png" alt="React Logo" />
      </div>
   );
};

이제 React로 (로컬) 이미지를 가져오는 방법을 알아보겠습니다!

React로 이미지를 가져오는 방법

외부 이미지를 제외하고 React에서 이미지가 사용되는 방식은 다른 프레임워크 또는 HTML과 크게 다릅니다. 이러한 이미지는 애플리케이션에서 사용하기 전에 먼저 React로 가져와야 합니다.

이것은 두 가지 방법으로 수행할 수 있습니다. import 문을 사용하거나 require() 기능. 두 가지 접근 방식을 모두 살펴보겠습니다.

React를 사용하여 이미지를 가져오는 방법 import 성명서

읽기 쉽고 이해하기 쉽기 때문에 import 문은 React에서 로컬에 저장된 이미지를 가져오기 위해 가장 일반적으로 사용되는 방법입니다. 이미지는 다음과 같이 처리됩니다. 기본 내보내기, 그리고 그것들을 가져올 때 우리는 구성 요소를 가져오는 것과 같은 방식으로 그렇게 합니다. 파일에서 가져오는 이미지까지의 상대 경로를 지정하면 됩니다.

import Logo from './images/react-logo.png';

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

위의 코드에서 우리는 여전히 img 태그 및 src 속성이지만 이번에는 src 속성은 JSX에서 중괄호를 사용하여 전달되는 문자열이 아닌 변수를 받습니다.

참고 : 원하는 만큼 이미지를 가져올 수 있지만 각 이미지는 import 문에서 고유한 이름을 가져야 합니다. 그렇지 않으면 오류가 발생합니다.

파일의 상대 경로를 지정하고 얻는 방법을 이해하는 것이 중요합니다. 그렇지 않으면 버그 및 오류가 발생할 수 있습니다. 앞의 예에서 이미지는 /src/images.

require() 함수를 사용하여 React로 이미지를 가져오는 방법

XNUMXD덴탈의 require() 함수는 현재 파일이 아닌 파일에서 외부 모듈을 포함하는 데 사용되는 Node.js 함수입니다. 와 같은 방식으로 작동합니다. import 문을 열고 이미지를 포함할 수 있습니다.

let Logo = require('./images/react-logo.png');

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

유일한 차이점은 상대 경로를 통해 이미지가 필요한 첫 번째 줄에서 액세스한 변수에 저장한 것입니다. img 중괄호를 통한 태그.

우리는 또한 이것을 인라인으로 하기로 결정하고 이미지를 변수에 할당하는 데 사용되는 추가 라인을 피할 수 있습니다. 필수 사항이 아니기 때문입니다.

const App = () => {
   return (
      <div>
         <img src={require('./images/react-logo.png')} alt="React Logo" />
      </div>
   );
};

결론

우리는 다음을 사용하여 로컬 이미지를 가져오는 방법을 배웠습니다. import 진술 및 require() 이 기사의 기능.