☰

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

tag-icon • tag-icon google-chrome url pictures
file:// 프로토콜을 사용하여 Chrome에 로컬 이미지를 표시하는 방법은 무엇입니까?

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

IE를 사용하여 이 작업을 수행한 기억이 있지만 방법은 기억나지 않습니다. 내 생각에 신뢰할 수 있는 설정은...

답변1

예를 들어 "를 사용하여 이미지를 base-64 코드로 변환할 수 있습니다.https://www.base64-image.de/"를 입력하고 결과를 브라우저에 복사하세요! 다음과 같습니다.

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

답변2

'Chrome'을 언급하셨으므로 Chrome 확장 프로그램을 사용하여 파일에 대한 로컬 액세스를 활성화할 수 있습니다.

다음과 같이하세요:

  1. 이미지가 있는 로컬 폴더에 'manifest.json'이라는 파일을 만들고 다음을 입력합니다.

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

  1. 크롬 주소 표시줄에 chrome://extensions/를 입력하세요.

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

  3. '압축해제된 확장 프로그램 로드' 버튼을 클릭하세요.

  4. 이미지와 Manifest.json 파일이 있는 로컬 폴더로 이동한 후 확인을 클릭하세요.

  5. 이제 확장명 'File Exposer'가 목록에 나열되고 'Enabled'에 확인 표시가 나타납니다. 폴더가 네트워크 드라이브나 기타 속도가 느린 드라이브에 있거나 폴더에 많은 파일이 있는 경우 목록에 표시되는 데 10~20초 이상이 걸릴 수 있습니다.

  6. 확장 프로그램과 연결된 'ID' 문자열을 확인하세요. EXTENSION_ID입니다.

  7. 이제 HTML에서 다음을 사용하여 파일에 액세스할 수 있습니다. 'EXTERNSION_ID'를 확장 프로그램이 생성한 ID로 변경하세요.

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

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

'img' 태그에서는 해당 폴더의 상대 폴더인 원본 폴더를 지정하지 않으므로 하위 폴더만 지정하면 됩니다.

매니페스트.json 파일을 수정하는 경우 확장 프로그램 옆에 있는 '다시 로드(Ctrl+R)' 링크를 클릭해야 합니다.

답변3

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

다음을 사용하여 이를 재정의할 수 있습니다.로컬링크(파이어폭스용), 하지만 자신의 컴퓨터에서만 작동합니다.

답변4

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

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

  1. Python이 있으면 임베디드를 실행하십시오.http 서버선택한 폴더에

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

  2. 다음과 같은 프로덕션 준비 서버를 사용하십시오.nginx,아파치

관련 정보