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 en utilisant IE mais je ne me souviens plus comment! Certains paramètres de confiance, je pense ...

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=='>

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.

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 cela ne fonctionnera que sur votre propre ordinateur.

dans Chrome cela ressemble à ceci

file:///C:/sample.txt

Si vous souhaitez tester une image locale sur le site actif, vous pouvez exécuter un serveur Web local et définir une URL telle que http://127.0.0.1:8123/img.jpg à la page à l'aide de DevTools.

Un serveur Web peut être utilisé de différentes manières: 1. Extension du navigateur "Web Server for Chrome" avec le dossier défini https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

2. Si vous avez python, lancez le serveur http intégré au dossier choisi

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

3. Utilisez un serveur prêt à la production comme nginx , apache

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.

D'accord, vous ne pouvez pas laisser quelqu'un d'autre accéder à votre système de fichiers local! Vous auriez besoin d'un service de serveur comme Apache, laissez votre ordinateur fonctionner 24 heures sur 24, assurez-vous qu'il ne surchauffe pas, veillez à une bonne sécurité et bien plus encore pour rendre cela possible. Et parce que l’administration de serveur est coûteuse et prend beaucoup de temps, la plupart des gens laissent le professionnel héberger notre matériel pour nous (hébergement Web).

En conclusion, si vous ne voulez pas utiliser votre propre serveur, il est beaucoup plus simple de le télécharger sur l'hébergeur de votre choix.