[styled-component] styled.img를 쓸까 styled.div에 imgUrl을 쓸까?

styled-component에서 이미지를 항상 background-image:url();로 쓰고 있던중..

갑자기 styled.img로 써볼까? 하는 생각이 들어서 검색해봤다!

다양한 방법이 있군..

---

~이미지를 사용하는 방법을 알아보자~

1. image를 import해서 url (${image});로 쓰는 방법

import smileLogo from "images/main/smileLogo.png";

const SmileLogo = styled.div`
	background-image: url(${smileLogo});
`;

여기서 height와 width를 조절하려면?

 

2. styled.img.attrs를 사용한다.

import smileLogo from "images/main/Yummy.png";

const SmileLogo = styled.img.attrs({
	src: `${smileLogo}`
	})`
    width: 50px;
    height: 30px;
`;

3. styled.img를 사용한후 component사용시 src로 넘겨주기!

import smileLogo from "images/main/smileLogo.png";

const SmileLogo = img`
	width: 30px;
	height:30px;
`;

<SmileLogo src={smileLogo} />

4. 지정된 규격의 이미지가 있을 경우 => import해서 수정 styled()안에 담아줘서 사용

const SmileLogo = styled.img`
	width: 30px;
	height: 30px;
`;

export default SmileLogo;

import SmileLogo from "images/main/smileLogo.png";

const SmileWithBorderLogo = styled(SmileLogo)`
	border: 1px solid red;
`;

<SmileWithBorderLogo/>

 

출처: 

https://stackoverflow.com/questions/41346413/react-js-styled-components-importing-images-and-using-them-as-div-background

React.js styled-components importing images and using them as div background

 

 

틀렸다면

댓글로 알려주샘~~~~~~~~

대신 차칸말로 킬킬