app.js 에선 각 사진을 나오게 하려면
function Card(props){
return (
<div className="col-md-4">
<em><strong> <imz src= { 'https://codingapple1.github.io/shop/shoes' + (1 + props.i) + '.jpg' } </strong></em>
<em><strong> width="100%" /> {/* shop/shoes/1 부터 데이터가 시작되므로*/}</strong></em>
<h4>{ props.shoes.title}</h4>
<p>{ props.shoes.content}</p>
</div>
)}
으로 만들었습니다.
그래서 detail/1, detail/2 등등에서 각 제품별로 다른 사진을 나오게 하려고 detail.js에서
function Detail(props){
let { id } = useParams(); // ../:id 의 id를 넣기 위해
let history = useHistory();
return (
<div className="container">
<박스>
<제목 className='red'>Detail</제목>
</박스>
<div className="my-alert">
<p className='my-alert-text'>재고가 얼마 남지 않았습니다.</p>
</div>
<div className="row">
<div className="col-md-6">
<strong><em> <imz src= { 'https://codingapple1.github.io/shop/shoes' + (1 + props.id) + '.jpg' } </em></strong>
이 부분에서 app.js처럼 써보니 사진이 깨져서 나오더군요. 왜 그런 걸까요? 그리고 해결 방법은 뭐가 있을까용...
참고로 imz라고 질문을 올린 것은 img로 하면 글이 안 올라가고 사진이 올라가서 그렇게 처리한것입니당.
</div>
<div className="col-md-6 mt-4">
<h4 className="pt-5">{props.shoes[id].title}</h4>
<p>{props.shoes[id].content}</p>
<p>{props.shoes[id].price}</p>
