Pourquoi ne puis-je pas faire <img src = "C: /localfile.jpg">?

96

Cela fonctionne si le fichier html est local (sur mon lecteur C), mais pas si le fichier html est sur un serveur et le fichier image est local. Pourquoi donc?

Des solutions de contournement possibles?

javascript html filesystems src PeterV
la source
3
Puis-je vous demander pourquoi vous voudriez faire une telle chose?
Boris Callens
2
@BorisCallens Par exemple, je pourrais vouloir tester la modification d'une image sur mon site Web de préparation, lorsque j'ai la nouvelle image sur ma propre machine et que je ne veux pas passer par tout le processus de téléchargement vers la mise en scène. Il semble que la seule façon de le faire serait de changer l'image dans l'environnement de développement au lieu de la mettre en scène de toute façon.
xji
C'est aussi un excellent moyen de faire une blague à vos connaissances les moins compétentes techniquement, en leur faisant penser que vous avez piraté un site Web.
0112 le
Une autre façon de le faire rapidement est de télécharger le fichier pour dire, Google Drive ou autre, puis copiez l'url de l'image et collez-la à l'intérieursrc=""
0112
Utilisez simplement un serveur Web de développement sur votre machine. C'est facile de nos jours puisque même PHP est livré avec un intégré.
MauganRa

Réponses:

64

Ce serait une faille de sécurité si le client pouvait demander des fichiers du système de fichiers local, puis utiliser JavaScript pour comprendre ce qu'ils contiennent.

Le seul moyen de contourner ce problème est de créer une extension dans un navigateur. Les extensions Firefox et les extensions IE peuvent accéder aux ressources locales. Chrome est beaucoup plus restrictif.

Bjorn
la source
1
encore, flash parvient à accéder à tout ce que l'utilisateur sélectionne, même dans Chrome
Javier
1
J'ai voté pour cela parce qu'il a répondu au pourquoi et a donné des moyens de le contourner. Ce que je vais probablement faire (et je sais que je n'ai pas fourni beaucoup de détails) est de créer un serveur Web local pour servir des images locales. De cette façon, le navigateur peut les afficher.
PeterV
1
Flash ne peut accéder aux ressources locales qu'avec un fichier de stratégie en place, sinon il passe en mode local et est limité par d'autres moyens.
Bjorn
2
Cette sécurité paranoïaque n'est qu'une perturbation. Vous POUVEZ télécharger des fichiers utilisateur sur le serveur avec AJAX à partir d'un formulaire avec le champ <input type = file>, mais si vous voulez être gentil avec l'utilisateur et montrer un aperçu, vous DEVEZ faire l'aller-retour et télécharger le fichier vers le serveur en premier. En quoi est-ce plus sûr que de générer l'image d'aperçu localement?
MKaama
2
Afin de montrer à l'utilisateur un bel aperçu, VOUS DEVEZ D'ABORD FAIRE UN ALLER-RETOUR AU SERVEUR. C'est possible avec AJAX. En quoi le téléchargement d'un fichier sur le serveur est-il d'abord plus sécurisé que la génération de l'image d'aperçu localement? La sécurité paranoïaque ne crée que du dérangement, mais ne résout aucun problème.
MKaama
31

ne devriez-vous pas utiliser "file: // C: /localfile.jpg" au lieu de "C: /localfile.jpg"?

AndreDurao
la source
27

Les navigateurs ne sont pas autorisés à accéder au système de fichiers local à moins que vous n'accédiez à une page html locale. Vous devez télécharger l'image quelque part. S'il se trouve dans le même répertoire que le fichier html, vous pouvez utiliser<img src="localfile.jpg"/>

Newtang
la source
J'essayais d'obtenir la même chose en utilisant le chemin absolu "/localfile.jpg" mais il semble que le navigateur le prenne comme une "image Web" et qu'il ne le trouve pas. Merci!
jmojico le
18

C:n'est pas un schéma d'URI reconnu. Essayez file://c|/...plutôt.

Ignacio Vazquez-Abrams
la source
6

Honnêtement, le moyen le plus simple était d'ajouter l'hébergement de fichiers au serveur.

  • Ouvrez IIS

  • Ajouter un répertoire virtuel sous le site Web par défaut

    • Le chemin virtuel sera ce que vous voulez parcourir dans le navigateur. Donc, si vous choisissez " serverName / images, vous pourrez y accéder en allant sur http: // serverName / images
    • Ajoutez ensuite le chemin physique sur le lecteur C:

  • Ajoutez les autorisations appropriées au dossier sur le lecteur C: pour «NETWORK SERVICE» et «IIS AppPool \ DefaultAppPool»

  • Actualiser le site Web par défaut

  • Et tu as fini. Vous pouvez maintenant accéder à n'importe quelle image de ce dossier en accédant à http: //yourServerName/wwhatYourFolderNameIs/yourImage.jpg et utiliser cette URL dans votre img src

J'espère que cela aide quelqu'un

foremaro
la source
3

IE 9: Si vous voulez que l'utilisateur regarde l'image avant de la publier sur le serveur: L'utilisateur doit AJOUTER le site Web à la "liste des sites Web de confiance".

United4Peace
la source
3

nous pouvons utiliser FileReader () de javascript et sa fonction readAsDataURL (fileContent) pour afficher le fichier de lecteur / dossier local. Liez l'événement de modification à l'image, puis appelez la fonction showpreview de javascript. Essaye ça -

<!doctype html>
<html>

<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;'>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
    <title></title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script type="text/javascript">
    function showpreview(e) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $("#previewImage").attr("src", e.target.result);
        }
        //Imagepath.files[0] is blob type
        reader.readAsDataURL(e.files[0]);
    }
    </script>
</head>
<body >
    <div>
    <input type="file" name="fileupload" value="fileupload" id="fileupload" onchange='showpreview(this)'>
    </div>
    <div>
        &nbsp;
    </div>
    <div>
    <img width="50%" id="previewImage">
    </div>
</body>
</html>
Ravindra Vairagi
la source
Chrome renvoie une erreur dans la console "Impossible de charger la ressource locale".
raosaeedali
1
@raosaeedali Désolé pour la réponse tardive. Si nous voulons afficher directement les images du lecteur local dans notre balise img de la page HTML, nous devons donner un chemin relatif. Une autre solution consiste à obtenir le chemin du fichier à partir d'un fichier de type d'entrée et à affecter la source du fichier à la balise img pour cela, j'ai mis à jour le code.
Ravindra Vairagi
@RavindraVairagi existe-t-il un moyen d'afficher l'image sans choisir un fichier dans l'explorateur? J'ai essayé d'utiliser votre script et je n'ai pas obtenu l'erreur de "Impossible de charger la ressource locale" mais je souhaite trouver un moyen d'imprimer directement l'image, si elle existe ...
Bandoleras
2

À part l'observation de Newtang sur les règles de sécurité, comment allez-vous savoir que quiconque consulte votre page aura les bonnes images c:\localfile.jpg? Vous ne pouvez pas. Même si vous pensez que vous pouvez, vous ne pouvez pas. Cela suppose un environnement Windows, d'une part.

Jack Kelly
la source
A moins que vous ne le puissiez. Je n'ai pas donné beaucoup de contexte dans la question, je sais :) Mais dans ce cas, nous pouvons réellement savoir.
PeterV
5
Et s'il prévoyait d'avoir seulement 10 utilisateurs dans un bureau qui ont tous des environnements Windows et les bonnes images à c: \ localfile.jpg. À cette fin ... il serait tout à fait capable non seulement de savoir que les images correctes sont là, mais aussi de les contrôler.
Nazca
Cette question est valable car son exigence concerne un environnement Windows, desservant un public très limité. Par exemple, j'ai rencontré le même problème lorsque je concevais un serveur Web basé sur Arduino où le seul client était un PC Windows sur le même réseau local que le serveur Arduino. L'Arduino était trop lent à servir les images au client, je devais donc stocker les images sur la machine cliente elle-même.
PrashanD
1

Je vois deux possibilités pour ce que vous essayez de faire:

  1. Vous voulez que votre page Web, exécutée sur un serveur, trouve le fichier sur l'ordinateur sur lequel vous l'avez conçue à l'origine?

  2. Vous voulez qu'il le récupère sur le PC affiché sur la page?

L'option 1 n'a tout simplement pas de sens :)

L'option 2 serait une faille de sécurité, le navigateur interdit à une page Web (servie à partir du Web) de charger du contenu sur la machine du spectateur.

Kyle Hudson vous a dit ce que vous devez faire, mais c'est tellement basique que j'ai du mal à croire que c'est tout ce que vous voulez faire.

Juan Mendes
la source
1

si vous utilisez le navigateur Google Chrome, vous pouvez utiliser comme ça

<img src="E://bulbpro/pic_bulboff.gif"   width="150px" height="200px">

Mais si vous utilisez Mozila Firefox, vous devez ajouter un "fichier" ex.

<img src="file:E://bulbpro/pic_bulboff.gif"   width="150px" height="200px">
Sachindra N. Pandey
la source
3
Cela n'a pas fonctionné pour moi dans Chrome, mais cela fonctionne dans IE?
octopus
0

Vous devez également télécharger l'image, puis créer un lien vers l'image sur le serveur.

Kyle Hudson
la source
0

qu'en est-il du fait que l'image soit quelque chose de sélectionné par l'utilisateur? Utiliser une balise input: file, puis après avoir sélectionné l'image, l'afficher sur la page Web du client? C'est faisable pour la plupart des choses. En ce moment, j'essaie de le faire fonctionner pour IE, mais comme pour tous les produits Microsoft, il s'agit d'un cluster fork ().

Fallenreaper
la source
0

Si vous déployez un site Web local uniquement pour vous ou certains clients, vous pouvez contourner ce problème mklink /D MyImages "C:/MyImages"en exécutant le répertoire racine du site Web en tant qu'administrateur dans cmd. Puis dans le html, faites<img src="MyImages/whatever.jpg"> et le lien symbolique établi par mklink reliera le lien src relatif avec le lien sur votre lecteur C. Cela a résolu ce problème pour moi, donc cela peut aider d'autres personnes qui viennent à cette question.

(Évidemment, cela ne fonctionnera pas pour les sites Web publics car vous ne pouvez pas exécuter facilement les commandes cmd sur les ordinateurs des gens)

takanuva15
la source
0

J'ai essayé beaucoup de techniques et j'en ai finalement trouvé une côté C # et côté JS. Vous ne pouvez pas donner de chemin physique à l'attribut src mais vous pouvez donner la chaîne base64 comme balise src to Img. Regardons l'exemple de code C # ci-dessous.

<asp:Image ID="imgEvid" src="#" runat="server" Height="99px"/>

Code C #

 if (File.Exists(filepath)
                            {
                                byte[] imageArray = System.IO.File.ReadAllBytes(filepath);
                                string base64ImageRepresentation = Convert.ToBase64String(imageArray);
                                var val = $"data: image/png; base64,{base64ImageRepresentation}";
                                imgEvid.Attributes.Add("src", val);
                            }

J'espère que cela aidera

Naveed Khan
la source
0

commence par file:///et se termine par filenamedevrait fonctionner:

<img src="file:///C:/Users/91860/Desktop/snow.jpg" alt="Snow" style="width:100%;">
Steve
la source