안녕하세요. 강의 part 2 : 평화로운 쇼핑몰 레이아웃 디자인시간에서
★ 리액트 17버전 이상에선 public 폴더안에 있는 이미지를 CSS파일에서 /image.jpg 이렇게 첨부할 수 없습니다.
이럴 경우 이미지를 src 폴더로 옮겨서 ./image.jpg 이렇게 첨부하십시오.
이렇게 언급하셔서 이미지 파일들을 다 src/imgs에 다 넣었습니다. (imgs안에 img1, img2, img3, img4 넣었음.)
그리고 나서 파일 제일 상단에 import로 다 가져온 후, 컴포넌트로 다이나믹하게 경로를 변경하려고 하니 자꾸 이미지가 제대로 안 나오는데 어떻게 해야할까요...? 코드는 아래와 같습니다.
import IMG1 from "../imgs/img1.png";
import IMG2 from "../imgs/home/img2.png";
import IMG3 from "../imgs/home/img3.png";
import IMG4 from "../imgs/home/img4.png";
function App() {
let [shoes, setShoes] = useState([1,2,3,4]);
return (
<div className="App">
{
shoes.map((item, idx) => {
return <Card item={shoes} idx={idx} key={idx} />;
})
}
</div>
}
function Card(props) {
return (
<div>
<strong><img src={"IMG" +(props.idx + 1)} /></strong>
<h3>이미지입니다.</h3>
</div>
);
}
