쇼핑몰 프로젝트를 진행중인데 목록에 이미지가 노출되야하는데 계속 경로를 못찾아왔다
프로젝트 폴더 경로가 D:에 있으니 파일에 액세스를 못하더라
그래서 일단 프로젝트 경로부터 C:로 옮겼다 그런데 계속 빌드가 안되는 일이발생..
gradle로 빌드를 하려는데 build.gradle을 찾을수가 없으니 폴더를 생성하라는 메세지가 나와서 git에있던 파일을 가져오니 정상적으로 프로젝트가 동작했다
여기까진 그렇다치고..경로를 어디로 해야 React에서 찾을수 있나보니 public으로 보통 경로를 찾아간다 하더라
그래서 public 밑에 upload 폴더를 만들어서 업로드해보니 파일이 생성되었다 생성된 경로로 크롬 주소로 찍어보니 이미지가나오길래 해당 경로를 그대로 img 태그로 가져왔다

<tbody>
{resArr.map((item, index) => (
    <tr key={index}>
        <td>
            <img
            	//process.env.PUBLIC_URL은 public 디렉토리다
                src={process.env.PUBLIC_URL + '/upload/img/' + item.fileNm}
                alt="productImg"
                style={{height: "4.3rem"}}
            />
        </td>
        <td>{item.productNm}</td>
        <td>{item.price}</td>
        <td>{item.author}</td>
    </tr>
))}
</tbody>

  

프로젝트의 폴더구조이다 참고하도록하자

 

'React' 카테고리의 다른 글

React / useHistory가 import 안될때  (0) 2024.07.11

+ Recent posts