JavaScript가 다른 디렉토리에서 이미지 파일로드

Question

JavaScript에서 다른 디렉토리의 이미지 파일을로드하려고합니다. 내 파일 구조는 다음과 같은 것입니다 : 내가 원하는 script.js에서

Project/js/script.js 
Project/img/1.png 

는 다음

document.getElementById("image").src = "Project/img/1.png"; 

가 어떻게이 일을해야합니까?

Answer 1

HTML 파일은 다른 상대 경로가 평가되는 기준 경로를 설정합니다. HTML 파일 경로가 "http://example.com/something/Project/index.html" 경우이 같은 Project 디렉토리에 상대적으로 다른 것들에 액세스 할 수 있도록 그래서, 다음 프로젝트 디렉토리는 기본 위치는 이미 :

js/script.js 
img/1.png 

도메인으로 시작하지 않는 상대 경로 또는 /은 앞에 http://example.com/something/Project/이 붙습니다.

Answer 2

브라우저는 이제까지 파일에 어떤 루트 폴더 모르는 - 그것은 단지는 URL에서 보는 것을 알고있다. 프로젝트의 루트가 Project 폴더에있는 것처럼 보이며 모든 것이 그 아래에 있습니다. (당신이 http://example.com/에 갈 때처럼, 당신의 웹 데몬은 당신의 '프로젝트'폴더에보고하도록 구성되어?)

그래서 당신은 할 수 있어야한다 :

document.getElementById("image").src = "/img/1.png"; 

첫 번째 슬래시를 말한다 "로 이동 내 루트 폴더, 웹 서버에있는 것이 무엇이든간에 "나머지는 나머지 경로 일뿐입니다.