Puis-je utiliser une image de mon système de fichier local des connaissances en HTML?

J'ai un document HTML hébergé sur un serveur web distant. Je suis d'essayer d'avoir l'un des éléments sur la page web utilisation d'un fichier image à partir de mon système de fichier local comme image d'arrière-plan. Pas de chance avec Chrome, Safari ou Firefox (n'ai pas essayé d'IE).

Voici un exemple de ce que j'ai essayé jusqu'à présent.

<!DOCTYPE html>
<html>
    <head>
        <title>Experiment</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            html,body { width: 100%; height: 100%; }
        </style>
    </head>
    <body style="background: url('file:///Users/username/Desktop/background.png')">
    </body>
</html>

Si je inspecter l'élément de corps à l'aide de mon navigateur web de l'outil d'inspection, et sélectionnez "Ouvrir l'image dans un nouvel onglet" l'image est là. Ainsi, le navigateur est entièrement capable de se rendre sur le fichier image à l'aide de l'URL donnée.

Est ce que j'essaie de retirer à tout possible, ou est-ce une fonctionnalité de sécurité du navigateur en essayant de bloquer des domaines externes à partir de l'accès de l'utilisateur, les ressources locales?

Pourquoi souhaites-tu le faire? Pourquoi ne pas simplement de télécharger l'image sur votre serveur? De toute façon, comment le serveur peut-il savoir quelle zone de l'emplacement du fichier est? Vous avez besoin plus que juste un chemin d'accès local, sauf si votre site est en local. Un sens? Je suis sûr que c'est une sécurité de chose et je ne suis pas sûr de la façon dont vous aller à ce sujet....ou pourquoi vous désirez. Semble que vous êtes d'avoir des ennuis. 🙂
N1tr0: pour répondre À votre question, j'ai voulu créer une alternative à Pixel Parfait et similaires superposition des extensions de navigateur, comme plusieurs navigateurs n'ont pas ces (c'est à dire, par exemple). Chargement d'un fichier de l'élément de choisir une image locale de fichier et puis un peu de JS pour saisir sa valeur et de créer une superposition.
Pour vous sauver de la douleur, je vous suggère d'envoyer le fichier à un serveur. Il est facile de accidentellement oublier que vous êtes à l'aide d'un fichier local comme une image de fond d'écran de votre document HTML, et accidentellement supprimer ou déplacer le fichier.
"est-ce une fonctionnalité de sécurité du navigateur en essayant de bloquer des domaines externes à partir de l'accès de l'utilisateur des ressources locales" Oui. C'est possible, mais les navigateurs modernes bloc file:// des liens de travail lorsqu'il est chargé dans un non-file: url.

OriginalL'auteur Johan Fredrik Varen | 2013-01-25

  1. 13

    Il semble que vous pouvez fournir le local nom de l'image, en supposant qu'il est dans le même dossier...

    Il suffit comme: 

    background-image: url("img1.png")

    OriginalL'auteur

  2. 13
    background: url(../images/backgroundImage.jpg) no-repeat center center fixed;

    cela devrait aider

    L'OP a une question sur comment faire de son navigateur de charger du HTML à partir d'un serveur distant, qui fait référence à un fichier qui est sur son système de fichiers local. Je pense que votre suggestion ne fonctionne que si l'image a également été sur le serveur distant.

    OriginalL'auteur

  3. 6

    Jeff Bridgman est correct. Tous vous avez besoin est d'

    background: url('pic.jpg')

    et cela suppose que le pic est dans le même dossier que votre code html.

    Aussi, Roberto réponse fonctionne très bien. Testé sous Firefox et IE. Grâce à
    Raptor pour l'ajout de mise en forme qui affiche une image complète adapter à l'écran,
    et sans les barres de défilement...
    Dans un dossier f, sur le bureau, est-ce html et une image, pic.jpg, à l'aide de
    votre nom d'utilisateur. Faire ces substitutions dans le ci-dessous:

    <html>
<head>
    <style>
        body {

        background: url('file:///C:/Users/userid/desktop/f/pic.jpg') no-repeat center center fixed;

        background-size: cover; /* for IE9+, Safari 4.1+, Chrome 3.0+, Firefox 3.6+ */
        -webkit-background-size: cover; /* for Safari 3.0 - 4.0 , Chrome 1.0 - 3.0 */
        -moz-background-size: cover; /* optional for Firefox 3.6 */ 
        -o-background-size: cover; /* for Opera 9.5 */
        margin: 0; /* to remove the default white margin of body */
        padding: 0; /* to remove the default white margin of body */
        overflow: hidden;
             }
    </style>
</head>
<body>
hello
</body>
</html>
    testé sur chrome aussi et a travaillé 🙂

    OriginalL'auteur

  4. 0

    Vous avez oublié le C: une fois le fichier:///

    Cela fonctionne pour moi

    <!DOCTYPE html>
<html>
    <head>
        <title>Experiment</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            html,body { width: 100%; height: 100%; }
        </style>
    </head>
    <body style="background: url('file:///C:/Users/Roby/Pictures/battlefield-3.jpg')">
    </body>
</html>
    Il n'y a pas de C *nix 😉
    kb.mozillazine.org/Links_to_local_pages_don't_work

    OriginalL'auteur