Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- npm에러
- app:compiledebugkotlin
- reactnative error
- array
- TS
- mainapplication.kt
- 타입스크립트
- forwardref type
- 안드로이드빌드에러
- Next.js
- javascript
- map
- async
- materialicons
- err_connection_refused
- extends
- 배열중복요소제거
- Spring
- app.post
- 리액트네이티브아이콘
- Filter
- set
- 이진탐색
- interface
- 상속
- generic
- react
- 스크롤이벤트
- 슬라이딩윈도우
- reactnative
Archives
- Today
- Total
rhanziy
React - 이미지 넣는 방법 3가지 본문
1. css 클래스 네임 주고 background주기
2. html안에서 style속성으로 url 넣기
import bg from './bg.png'
function App(){
return (
<div>
<div className="main-bg" style={{ backgroundImage : 'url(' + bg + ')' }}></div>
</div>
)
}
3. 하던대로 img 태그 src로 경로지정( 외부 이미지는 절대경로 그대로 작성)
<div className="col-md-4">
<img src="https://codingapple1.github.io/shop/shoes3.jpg" width="80%" />
<h4>상품명</h4>
<p>상품정보</p>
</div>
4. public 폴더에 파일 밀어넣고 이미지 경로 사용(import 안해도 된당)
<img src="/logo192.png" />
//권장되는 형식
<img src={process.env.PUBLIC_URL + '/logo192.png'} />
하위 경로에 배포하면 파일을 못찾을 수도 있으니 홈페이지 URL 기재 권장!
'React' 카테고리의 다른 글
React - axios 라이브러리로 ajax요청 (0) | 2022.11.24 |
---|---|
React - styled components 라이브러리 (0) | 2022.11.22 |
리액트 Hooks - useAxios (0) | 2022.05.24 |
리액트 - 함수형 프로그래밍 useConfirm (0) | 2022.05.18 |
리액트 Hooks - useTitle (0) | 2022.05.15 |
Comments