쇼핑몰 프로젝트에서 detail img태그 반복문

[곽예영]

App.js에서 

function Card(props) { /* 부모의 state를 쓰려면 props를 받아서 써야함 */
  return (
   
    <div className='col-md-4'>
        <Link to={'/detail/'+props.i}><img src="./shoes1.jpg"></Link>
        <h4>{ props.shoes.title }</h4>
        <p>{props.shoes.content} & {props.shoes.price}</p>
      </div>
  )
} 했던 것처럼 

Detail.js에서도 

 

<img src="./shoes1.jpg">를 써서 사용하려고 했는데 자꾸 이미지가 안 뜨네요.. 제가 뭔가 놓치고 있는 것 같은데 잘 모르겠습니다ㅠㅠ

[codingapple]

img src={ require("./shoes"+(props.i+1)+".jpg") } 

이런걸 써봅시다

[곽예영]

말씀해주신대로 하니 App.js Card 컴포넌트에서는 잘 뜹니다!

Detail.js에서도 img를 img src={ require("./shoes"+(props.i+1)+".jpg") } 이대로 쓰니 아예 페이지가 사라져버리는데 props를 사용하면 App.js에서 쓰던 i를 쓸 수 있는게 아닌가요?

 

 img src = {  require("./shoes"+(props.i+1)+".jpg")} width="100%" alt='shoes'  이렇게 현재 적혀있습니다!

[곽예영]

아 그리고 img src = {  require("./shoes"+(props.i+1)+".jpg")} width="100%" alt='shoes' 라고 App.js에 적히면

뒤에 axios.get을 할 때 제가 설정한 catch 구문이 돌아가는데 require은 로컬 이미지에만 쓸 수 있는건가요??

 

[codingapple]

일단 props.i를 부모에서 잘 보내고 있는지 확인해봐야할듯요 

require() 문법은 로컬이미지 불러올 때 씁시다 

[글쓴이]

글