file : // 프로토콜을 사용하여 Chrome에서 로컬 이미지를 표시하는 방법은 무엇입니까?

Chrome을 사용하여 http를 통해 제공되는 웹 페이지에서 이미지의 로컬 파일 경로를 지정하고 싶습니다. 가능합니까?

IE를 사용 하여이 작업을 수행하는 것을 기억하지만 방법을 기억할 수 없습니다! 내가 생각하는 일부 신뢰할 수있는 설정 ...

예를 들어 " http://duri.me/ " 를 사용하여 이미지를 base-64 코드로 변환 하고 결과를 브라우저에 복사 할 수 있습니다! 처럼:

<img width='16' height='16'  src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAApklEQVQ4jWP8//8/Ay5Q4s6GU7Jn5y9GBgYGBiacuokELKTYSpQByKB68UkMMUExQ0ZkPsVeYEQPREZGRpK8gOGCdy/PwTEyH8ZGF8MbBgwMDAxC4kZ4xfAaALMFGfz//5+6gYjXBS+fXUHhaxjEMqKrQXGBglU8SgyIS+mgYHR5DAPIAYz////HavL5DQVwtmHABAyND44tZGRgwBMG2DRhAxR7AQBhgT3yD6eBRwAAAABJRU5ErkJggg=='>

'Chrome'을 언급 했으므로 Chrome 확장 프로그램을 사용하여 파일에 로컬로 액세스 할 수 있습니다.

이 단계를 따르세요:

1) 이미지가있는 로컬 폴더에 'manifest.json'이라는 파일을 만들고 다음을 입력하십시오.

{
  "name": "File Exposer",
  "manifest_version": 2,
  "version": "1.0",
  "web_accessible_resources": ["*.jpg","*.JPG"]
}

2) 다음은 크롬 주소 표시 줄입니다. chrome : // extensions /

3) '개발자 모드'가 선택되어 있는지 확인하십시오 (오른쪽 상단)

4) '압축되지 않은 확장 프로그램로드'버튼을 클릭하십시오.

5) 이미지와 manifest.json 파일이있는 로컬 폴더로 이동하여 확인을 클릭하십시오.

6) 이제 'File Exposer'확장자가 목록에 표시되고 'Enabled'에 대한 확인 표시가 나타납니다. 폴더가 네트워크 드라이브 나 다른 느린 드라이브에 있거나 파일이 많은 경우 목록에 10-20 초 이상 표시 될 수 있습니다.

7) 확장과 관련된 'ID'문자열을 기록하십시오. EXTENSION_ID입니다

8) 이제 HTML에서 다음을 사용하여 파일에 액세스하여 'EXTERNSION_ID'를 확장명이 생성 한 ID로 변경하십시오.

<img src='chrome-extension://EXTENSION_ID/example1.jpg'>

* .jpg는 재귀 적이며 지정된 폴더 및 모든 하위 폴더의 파일과 자동으로 일치하므로 각 하위 폴더에 대해 지정할 필요가 없습니다. 또한 대소 문자를 구분합니다.

'img'태그에서는 해당 폴더와 관련된 원래 폴더를 지정하지 않으므로 하위 폴더 만 지정하면됩니다.

manifest.json 파일을 수정하면 확장명 옆에있는 '다시로드 (Ctrl + R)'링크를 클릭해야합니다.

로컬이 아닌 웹 페이지 는 Chrome 또는 최신 웹 브라우저에서 로컬 파일 에 액세스 할 수 없습니다 .

LocalLinks ( Firefox의 경우 ) 를 사용하여 이를 재정의 할 수 있지만 자신의 컴퓨터에서만 작동합니다.

Chrome에서 이것은 다음과 같습니다

file:///C:/sample.txt

라이브 사이트에서 로컬 이미지를 테스트하려면 로컬 웹 서버를 실행하고 DevTools를 사용하여 페이지의 http://127.0.0.1:8123/img.jpg 와 같은 URL을 설정할 수 있습니다

웹 서버를 실행하는 방법은 여러 가지가 있습니다. 1. 정의 된 폴더가 https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb 인 "Chrome 용 웹 서버"브라우저 용 확장

2. 파이썬이있는 경우 선택한 폴더에서 내장 http 서버 를 실행 하십시오.

   python3 -m http.server 8123 # python 3 버전
   python -m SimpleHTTPServer 8123 # python 2 버전

3. nginx , Apache 와 같은 프로덕션 준비 서버 사용

필자의 경우 하나의 작은 이미지 변경이 다른 반응 크기에서 어떻게 보이는지 확인해야했습니다. 다른 이름으로 저장 ... 전체 웹 페이지를 바탕 화면에 저장 한 다음 대신 여는 것이 가장 쉬웠습니다. 이미지 src를 검사하고 편집합니다.

다른 사람이 로컬 파일 시스템에 액세스하도록 할 수는 없습니다. Apache와 같은 서버 서비스가 필요합니다. 하루 24 시간 컴퓨터를 작동 시키십시오. 그리고 서버 관리는 비용이 많이 들고 시간이 많이 걸리기 때문에 대부분의 사람들은 전문가들이 우리를 위해 웹 호스팅을 호스팅하도록합니다.

결론적으로 자신의 서버를 실행하지 않으려면 선택한 웹 호스트에 업로드하는 것이 훨씬 쉽습니다.