inflearn logo
강의

Khóa học

Chia sẻ kiến thức

Một trại huấn luyện phát triển toàn diện thực sự dành cho những người không chuyên ngành

[그랩마켓] Phát triển web với React - 1

왜 src폴더 위치에서 images가 불러와 지는 지 모르겠습니다

Đã giải quyết

735

tostarmk

15 câu hỏi đã được viết

0

스크린샷 2023-06-26 132520.png<img src="images/icons/logo.png" /> 만으로 사진이 불러와 지는데요 엄밀히 따지면 images 파일은 public 폴더 아래 있으니
<img src="../public/images/icons/logo.png" /> 처럼 상위 폴더로 이동 후 public에서 images에 접근할 수 있는 것 아닌가요?

HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow

Câu trả lời 3

0

grab

만약 질문자님이 입력하신 것처럼 상대경로로 images/...를 썼다면 react에서 내부적으로 경로를 검색할 때 public이라는 폴더를 붙여서 public/images로도 검색을 하게 됩니다!

구체적인 내용은 아래 답변을 참고해보셔도 좋을 것 같습니다.
https://inflearn.com/questions/911255

0

use071252788

상대경로에서 src는 자신이 있는 파일부터 위치를 탐색합니다.

.은 현위치라는 뜻이고, ..은 상위 폴더로 이동한다는 뜻입니다.

images/icons/logo.png이 뜻은 ./images/icons/logo.png와 같은 뜻입니다.

../public/images/icons/logo.png이와 같이 접근할 수 있지만 접근하려는 파일이 images 파일과 같은 위치에 있다면 images/icons/logo.png이와 같이 접근하는것도 맞는 방법입니다.

0

communityai8509

안녕하세요, 인프런 AI 인턴입니다. 프로그래밍 관련한 질문에 답변드리도록 하겠습니다.

HTML에서 이미지를 불러오는 경우, 이미지 파일의 경로를 정확하게 설정해야 합니다. 보통 이미지 파일은 웹사이트의 public 폴더에 위치시키는 것이 일반적입니다.

경로 설정에 따라 이미지 파일을 불러올 때, 상대 경로와 절대 경로를 사용할 수 있습니다. 상대 경로는 현재 파일의 위치를 기준으로 상대적으로 경로를 설정하는 방식입니다. 반면, 절대 경로는 파일의 경로를 전체적으로 표기하여 설정하는 방식입니다.

예를 들어, src 폴더 아래의 images 폴더에 위치한 logo.png를 불러오기 위해서는 상대 경로를 사용하여 경로를 설정할 수 있습니다. src 폴더와 images 폴더가 같은 위치에 있다면, <img src="images/icons/logo.png" />와 같이 경로를 설정할 수 있습니다.

만약 public 폴더 아래에 images 폴더가 위치한다면, 상위 폴더로 이동하여 public 폴더 안에 있는 images 폴더에 접근할 수 있습니다. 이 경우에는 <img src="../public/images/icons/logo.png" />와 같이 경로를 설정할 수 있습니다.

경로 설정에 따라 이미지 파일을 불러올 수 있습니다. 정확한 경로 설정 확인 후 다시 시도해보세요. 만약 계속해서 문제가 발생한다면, 파일 구조를 확인하거나 파일 이름에 오타가 있는지 다시 한번 확인해보시는 것을 추천드립니다.

더 자세한 내용은 웹 페이지의 개발자 도구를 사용하여 경로를 확인하실 수 있습니다. 감사합니다.

[해결]그랩님 답변 주세요.

0

161

2

그랩님의 답변을 기다립니다/102강 전반적인 에러

0

141

2

[그랩님께]101강 안드로이드 에러들(Key prop)해결방법 궁금합니다.

0

123

2

[재질문][그랩님 답변 부탁드립니다]101강

0

140

2

[그랩님 답변 부탁드립니다]101강 Axios 에러와 502 Bad Gateway 질문

0

97

2

Ngrok 설치 후 forwarding Url 에러

0

133

2

[그랩님께,Ngrok 악성코드 인식 해결방법]질문 드립니다.

0

217

2

Ngrok 설치 후 forwarding Url로 연결 불가

0

135

1

그랩님,[꼭] 답변 부탁드립니다.

0

65

1

[꼭][[꼭] 그랩님, 답변 부탁드립니다], Failed to load resource: the server responded with a status of 404 (Not Found) 상품 상세 페이지 질문입니다.

0

149

1

6강/7강 수업

0

50

1

그랩님, 상품 상세 페이지 에러와 의문점 질문드립니다.

0

98

2

그랩님, 해결되지 않은 에러 메시지 [꼭] 답변 부탁 드립니다.

0

134

2

[재 질문]Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?

0

88

1

Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?

0

127

2

일반적인 css 꾸미기에서 width와 height의 값?

0

90

2

Windows에서의 업로드 후 홈화면 상품이미지 오류 해결방법

0

193

1

그랩마켓 웹화면 구현하기 -2 질문입니다.

0

119

1

react에 반영이 되지 않습니다.

0

236

1

터미널 npm install -g create-react-app 작성 후 오류

0

419

1

create-react-app my app 실행 시 에러

0

354

2

포스트맨 질문

0

99

1

<꼭 답변 부탁 드립니다>그랩선생님, [컴포넌트 사용하기] 강의에서 질문 있습니다.

0

260

2

그랩선생님, 질문 답변 부탁 드립니다.vscode에서 npm install -g create-react-app 입력 후 에러 입니다.

0

473

2