리엑트 이미지 경로에 관한 질문입니다.

[서나현]

쇼핑몰 파트 수업을 듣다가 제가 원하는 이미지로 수업을 진행해보고 싶어서 복습 겸 파일을 새로 만들어보는 중입니다.

원하는 이미지를 다운받아서 src폴더에 넣은 다음 import하였고 필요한 자리에 img태그 안에 src로 import 해두었던 이미지를 가져와서 사용하는 것에는 성공했으나,

후에 상품목록을 Component화 시키고 반복문 map을 사용하는 부분에서 에러 창은 뜨지 않으나 card의 내용이 안나오는 상황입니다. 

아래의 이미지 처럼 진행하였는데 src 경로에서 선생님처럼 인터넷 주소를 넣지 않으면 이미지에 i를 붙여 반복하는 방법이 궁금합니다.

그리고, className에도 i를 활용할 수 있는지 질문드립니다.

[codingapple]

지금은 이미지들을 그냥 public 폴더에 넣고

<img src={ '../shoes' + props.i + '.png'}>

하면 됩니다 

[서나현]

동영상을 리엑트 홈페이지에 올리고 싶은데 기존 이미지 업로드 방식대로 퍼블릭폴더에 해당 파일을 넣고 불러와도 에러가 뜹니다 혹시 리엑트로 동영상을 올리는 방법이 따로 있는지 알 수 있을까요??

[codingapple]

이미지랑 별차이없습니다 video 태그랑 source 태그 경로까지 잘 집어넣으셨나요 

[서나현]

네ㅠㅠㅠ 넣어봤는데 에러가 뜨면서 안불러와지네요...

[codingapple]

import video from './비디오.mp4';

<video controls autoPlay loop muted>
<source src={video} type="video/mp4" ></source>
</video>

이렇게 써봅시다 

[서나현]

아 이렇게 쓰고 비디오 파일을 src 폴더에 넣으니 정상적으로 재생됩니다 감사합니다!!

[글쓴이]

글