230906 개발일지 TIL - React에서 이미지 사용(src)

React에서 이미지 사용

React에서 이미지를 사용하는 방법은 여러 가지가 있다. 그 중에서 가장 간단한 방법은 img 태그를 사용하여 이미지를 불러오는 것이다.

1. 이미지 Import
먼저, 해당 이미지 파일이 프로젝트 내에 존재하는지 확인하고, 그 경로를 정확히 알아야 한다.

import ServiceBannerImage from '../../../assets/images/customer/home/banner/service/service-banner.jpg';

2. img 태그에 적용
Import한 이미지를 img 태그의 src 속성에 넣어주면 된다.

<img src={ServiceBannerImage} alt="Service Banner" />

여기서 alt 속성은 대체 텍스트다. 이 텍스트는 스크린 리더 등 웹 접근성 도구가 사용될 때 중요하다.

3. styled-components로 스타일 적용

import styled from 'styled-components';

const Image = styled.img`
   width: 100%;
   height: auto;
`;

<Image src={ServiceBannerImage} alt="Service Banner" />