☰

如何在Chrome中使用file://協定顯示本機圖片？

tag-icon • tag-icon google-chrome url pictures
如何在Chrome中使用file://協定顯示本機圖片？

我希望能夠使用 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 網址列：chrome://extensions/

  2. 確保選取“開發者模式”（頁面右上角）

  3. 點選「載入解壓縮的擴充功能」按鈕

  4. 導航到圖像和manifest.json 檔案所在的本機資料夾，按一下“確定”

  5. 擴展“File Exposer”現在應該列在列表中，並且有一個複選標記“已啟用”。如果該資料夾位於網路磁碟機或其他慢速磁碟機上或包含大量文件，則可能需要 10-20 秒或更長時間才會出現在清單中。

  6. 請注意與您的分機關聯的“ID”字串。這是 EXTENSION_ID

  7. 現在，在 HTML 中，您可以使用以下內容存取該文件，將「EXTERNSION_ID」變更為您的擴充功能產生的任何 ID：

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

請注意，*.jpg 是遞歸的，它會自動匹配指定資料夾和所有子資料夾中的文件，不需要為每個子資料夾指定。另請注意，它區分大小寫。

在「img」標籤中，您不指定原始資料夾，它是該資料夾的相對資料夾，因此只需要指定子資料夾。

如果修改 manifest.json 文件，則需要點擊擴充旁邊的「重新載入 (Ctrl+R)」連結。

答案3

非本地網頁無法存取本地文件在 Chrome 或任何現代網頁瀏覽器中。

您可以使用以下方法覆蓋它本地連結（對於火狐瀏覽器），但它只能在你自己的機器上工作。

答案4

如果您想在即時網站上測試本機圖像，您可以執行本機 Web 伺服器並設定 URL，例如http://127.0.0.1:8123/img.jpg在使用 DevTools 的頁面上

執行 Web 伺服器有不同的方法： 1. 具有已定義資料夾的瀏覽器擴充功能“Web Server for Chrome” https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

  1. 如果你有 python 那麼運行嵌入http伺服器在選定的資料夾中

    python3 -m http.server 8123 # python 3 版本
    python -m SimpleHTTPServer 8123 # python 2 版本

  2. 使用生產就緒伺服器，例如nginx,阿帕契

相關內容