detail.js 에서 각 제품별 사진 나오게 하기

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>