Detail 사진 변경 질문

[이결]

메인 페이지에서 루트 경로를 /detail/:id 이런식으로 지정해서 detail 내용들이 바뀐것처럼 이미지도 바꾸는 방법은 없을까요?
img1,img2,img3은 public에 넣어뒀습니다.

import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { Nav, Col } from 'react-bootstrap';

function Detail(props) {
let {id} = useParams();
let searchProduct = props.country.find(x => x.id == id);
let 
 = useState(0);

return(
<div className="container">
<div className="row">
<div className="col-md-6">
<Card/>
</div>
<div className="col-md-6">
<h4 className="pt-5">{searchProduct.title}</h4>
<p>{searchProduct.content}</p>
<p>{searchProduct.price}원</p>
<button className="btn btn-danger">결제하기</button>
</div>
</div>

<Nav variant="tabs" defaultActiveKey="link0">
<Nav.Item>
<Nav.Link onClick={()=>{ tabChange(0)}} eventKey="link0">버튼0</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link onClick={()=>{ tabChange(1)}} eventKey="link1">버튼1</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link onClick={()=>{ tabChange(2)}} eventKey="link2">버튼1</Nav.Link>
</Nav.Item>
</Nav>
<TabContent tab = { tab }/>
 
 
</div>
 )
}
function TabContent({tab}){
return <div className="start end">
{[ <div>안녕하세요</div>, <div>내용1</div>, <div>내용2</div>]
}
</div>
}

function Card(props){
return(
<Col>
{img src={process.env.PUBLIC_URL + '/img1.jpg'} height="100%" width="90%" />    //코드가 안나오고 사진으로 나와서 맨 앞쪽 <를 {로 수정했습니다
</Col>
 )
}

export default Detail;

[codingapple]

1 자리에 props.상품번호같은걸 넣어봅시다

[글쓴이]

글