part2.쇼핑몰프로젝트 - 4강 이미지 경로 문의

안녕하세요. 
강사님 덕분에 흥미 잃지 않고 리액트 재미있게 수강하고 있습니다.
다름 아니라 쇼핑몰 프로젝트 4강에서, 컴포넌트로 만든 태그를 map 으로 반복하는 방법을 알려주셨는데요.
저는 이 부분에서 이미지를 절대경로로 쓰지 않고, src-img 폴더의 상대경로로 진행해보려 했습니다.
그런데 계속 이미지가 뜨지 않더라구요. 아래 코드 첨부합니다. 
파일명은 flavor1, flavor2, flavor3 이런 식으로 저장했기 때문에 뒤의 숫자만 i로 반복되게 했습니다.



그리고 이것은 번외의 질문이지만, 이미지를 객체의 키값에 넣을 수 있는 방법은 없을지도 궁금합니다. 
data.js 파일 내부에 img: "이미지 상대경로" 로 넣고, 컴포넌트에 props 로 호출하는 방법입니다.
(이미지 파일을 저장할 때, -1,-2,-3 ... 등 숫자가 포함되지 않은 순수한 문자만으로 작성된 
파일명을 반복하는 방법이 궁금하기 때문입니다) 
글솜씨가 부족하여 작성한 코드도 첨부합니다.


(1) 객체에 key 값으로 이미지 경로 넣기


(2) 컴포넌트에 props 로 img 호출 


(3) map 으로 반복


감사합니다 :D