HTML에서 URL의 src 경로에서 레벨을 올리는 방법은 무엇입니까?

나는 {root} / styles에 스타일 시트를 저장하고 웹 사이트의 {root} / images에 이미지를 저장합니다. 지정된 이미지의 이미지 디렉토리에서 찾을 수 있도록 스타일 시트의 경로를 어떻게 제공합니까?

예 : 안으로 background-image: url('/images/bg.png');

..상위 디렉토리를 표시하는 데 사용하십시오 .

background-image: url('../images/bg.png');

다음은 상대 파일 경로에 대해 알아야 할 모든 것입니다.

• 로 시작 / 하여 루트 디렉토리 로 돌아가서 시작합니다.

• 로 시작하면 ../ 한 디렉토리 뒤로 이동하고 거기서 시작합니다.

• 로 시작하면 ../../ 두 개의 디렉토리가 뒤로 이동하고 거기에서 시작됩니다 (등 ...).

• 앞으로 나아가려면 첫 번째 하위 디렉토리로 시작하고 계속 진행하십시오.

자세한 내용은 여기 를 클릭 하세요 !

사용 ../:

background-image: url('../images/bg.png');

원하는만큼 자주 사용할 수 있습니다. 예를 들어 ../../images/다른 위치에서도 사용할 수 있습니다 . 예를 들어 ../images/../images/../images/( ../images/물론 동일 )

Chrome에서는 일부 HTTP 서버에서 웹 사이트를로드 할 때 절대 경로 (예 /images/sth.png:)와 일부 상위 디렉토리에 대한 상대 경로 (예 :)가 모두 ../images/sth.png작동합니다.

그러나!

로컬 파일 시스템에서 HTML 문서를로드 할 때 (Chrome에서!) 현재 디렉토리 위의 디렉토리에 액세스 할 수 없습니다. 즉 ../something/something.sth, 절대 경로에 액세스 하고 상대 경로를 변경하면 도움이되지 않습니다.

다음과 같은 파일 구조가 있다고 가정합니다.

-css
  --index.css
-images
  --image1.png
  --image2.png
  --image3.png

image1예를 들어 CSS에서는 라인을 사용하여에 액세스 할 수 있습니다 ../images/image1.png.

참고 : Chrome을 사용하는 경우 작동하지 않을 수 있으며 파일을 찾을 수 없다는 오류가 표시됩니다. 나는 같은 문제가 있었기 때문에 크롬에서 전체 캐시 기록을 삭제하고 작동했습니다.

여러 웹 사이트에서 사용할 수 있도록 스타일 시트 / 이미지를 폴더에 저장하거나 동일한 서버의 다른 사이트에서 동일한 파일을 재사용하려는 경우 내 브라우저 / Apache에서 다음 페이지로 이동하는 것을 허용하지 않습니다. 웹 사이트 루트 URL 위의 모든 상위 폴더. 이는 보안상의 이유로 명백해 보입니다. 지정된 웹 폴더가 아닌 다른 곳에서 서버를 탐색 할 수 없어야합니다.

예 : 작동하지 않음 : www.mywebsite.com/../images

해결 방법으로 Symlink를 사용합니다.

www.mywebsite.com 디렉토리로 이동하여 ln -s ../images images 명령을 실행하십시오.

이제 www.mywebsite.com/images는 www.mywebsite.com/../images를 가리 킵니다.