import 이미지를 component화 할 때 props사용 시 이미지 오류

[김현기]

안녕하세요.
강의 잘 듣고있습니다.

왠만해서 여기저기 건들여보고 검색해보고 스스로 해결해보고 싶었으나,
진전이 없어 질문글 드립니다.

import main1 from './img/amiana.jpg';
import main2 from './img/wanan.jpg';
import main3 from './img/maple.jpg';


function App() {
 <Mainfront lodging={lodging[0]} i={1} />
 <Mainfront lodging={lodging[1]} i={2} />
 <Mainfront lodging={lodging[2]} i={3} />
}

function Mainfront(props) {
  return (
    <>
    < img src={'main'+props.i} width="110%" alt="amiana resort"/>
    <h4>{props.lodging.title}</h4>
    <p>{props.lodging.content}</p>
    <p>{props.lodging.day}</p>
    </>
  )
}

이미지는 src 경로의 img 폴더에 있습니다. (main1, 2, 3)
{'main'+props.i} 이 부분을 {main1} 로 했을때의 이미지는 동일한 이미지 3개로 잘 불러와 집니다.

{'main'+props.i}  결과값 엑박 3개 ----- X
{main1} 결과값 import된 사진 3개 ---- O
어느 부분이 잘못되었고, 보강해야 할 개념이 무엇인지요?

[codingapple]

이미지 경로 다이나믹하게 적으려면 public폴더쓰거나 require() 쓰거나 해야합니다

[김현기]

import 제거, require 사용으로 수정하여 적용했습니다.
src={require('./img/main' + props.i + '.jpg')

도움 감사드립니다.

[글쓴이]

글