web-dev-qa-db-fra.com

Comment afficher des images locales dans Chrome à l'aide du protocole file: //?

J'aimerais pouvoir spécifier un chemin de fichier local pour une image sur une page Web transmise via http à l'aide de Chrome - est-ce possible?

Je me souviens d’avoir fait cela avec IE mais je ne me souviens plus comment! Certains paramètres de confiance, je pense ...

google-chromeurlpictures
20
JSH

vous pouvez convertir l'image en code base 64, par exemple avec " http://duri.me/ " et copier le résultat dans le navigateur! Comme:

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

Puisque vous avez parlé de "Chrome", vous pouvez utiliser des extensions Chrome pour ce faire, afin de permettre un accès local à vos fichiers.

Suivez ces étapes:

1) Dans le dossier local où se trouve votre/vos image (s), créez ce fichier nommé 'manifest.json' et entrez ceci:

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

2) Mettez ceci est votre barre d’adresse chrome: chrome: // extensions /

3) Assurez-vous que le 'Mode développeur' est coché (en haut à droite de la page)

4) Cliquez sur le bouton 'Load Unpacked Extension'

5) Accédez au dossier local contenant la ou les images et le fichier manifest.json. Cliquez sur OK.

6) L'extension 'File Exposer' devrait maintenant être listée dans la liste et cochée 'Enabled'. Si le dossier se trouve sur un lecteur réseau ou un autre lecteur lent ou contient de nombreux fichiers, l'affichage de la liste peut prendre de 10 à 20 secondes, voire davantage.

7) Notez la chaîne 'ID' associée à votre extension. C'est le EXTENSION_ID

8) Maintenant, dans votre code HTML, vous pouvez accéder au fichier avec ce qui suit en remplaçant "EXTERNSION_ID" par l'identifiant généré par votre extension:

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

Notez que le fichier * .jpg est récursif et qu'il correspond automatiquement aux fichiers du dossier spécifié et de tous les sous-dossiers. Vous n'avez pas besoin de spécifier pour chaque sous-dossier. Notez également, sa casse.

Dans la balise 'img', vous ne spécifiez pas le dossier d'origine, son relatif par rapport à ce dossier, de sorte que seuls les sous-dossiers doivent être spécifiés.

Si vous modifiez le fichier manifest.json, vous devrez cliquer sur le lien "Recharger (Ctrl + R)" en regard de l'extension.

11
Rob Donovan

Les pages Web non locales ne peuvent pas accéder aux fichiers locaux dans Chrome ou à tout navigateur Web moderne.

Vous pouvez remplacer ceci en utilisant LocalLinks ( pour Firefox ), mais ne travaillez que sur votre propre machine.

6
grawity

Si vous souhaitez tester l’image locale sur le site actif, vous pouvez utiliser un serveur Web local et définir une URL de la manière suivante: http://127.0.0.1:8123/img.jpg à la page en utilisant DevTools

Il existe différentes manières d’exécuter un serveur Web: 1. Extension du navigateur "Web Server for Chrome" avec le dossier défini https://chrome.google.com/webstore/detail/web-server. -for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

  1. Si vous avez python, lancez le serveur http intégré dans le dossier choisi

    python3 -m http.server 8123 # version de python 3
    python -m SimpleHTTPServer 8123 # version de python 2

  2. Utilisez un serveur prêt à la production comme nginx , Apache

2
koxt

dans Chrome cela ressemble à ceci

file:///C:/sample.txt
2
KutscheraIT

Dans mon cas, je n'avais besoin que de voir à quoi ressemblerait un petit changement d'image dans différentes tailles réactives. Il était plus simple de sauvegarder sous ... une page Web complète sur le bureau, puis de l'ouvrir à la place. J'inspecte et édite l'image src.

0
changokun