Wie lade ich Dateien in eine HTML-Seite, nachdem sie auf einen anderen Computer übertragen wurde?

Question

Wenn ich ein gezipptes Feld meiner Website an meinen anderen Computer sende, scheint der Link unterbrochen zu sein. Gibt es eine Möglichkeit, die Bilder irgendwie in den Ordner einzubetten und nicht auf meine Festplatte?

<ul> 
    <li> 
     <img src="file:///Users/Platyous/Desktop/Summer%202016dt/DIg2500/Semester%20Website%20-%20Gintama%20Fan%20page/Images/Gintoki.png">Sakata Gintoki</li> 
    <li> 
     <img src="file:///Users/Platyous/Desktop/Summer%202016dt/DIg2500/Semester%20Website%20-%20Gintama%20Fan%20page/Images/Kagura.jpg">Kagura</li> 
    <li> 
     <img src="file:///Users/Platyous/Desktop/Summer%202016dt/DIg2500/Semester%20Website%20-%20Gintama%20Fan%20page/Images/Shinpachi.jpg">Shimura Shinpachi</li> 
    </ul> 

Das gleiche gilt auch für meine Navigation.

<nav> 
    <a href="file:///Users/Platyous/Desktop/Summer%202016dt/DIg2500/Semester%20Website%20-%20Gintama%20Fan%20page/home.html">Home</a> | 
    <a href="file:///Users/Platyous/Desktop/Summer%202016dt/DIg2500/Semester%20Website%20-%20Gintama%20Fan%20page/Gintama.html">Gintama The Show</a> | 
    <a href="file:///Users/Platyous/Desktop/Summer%202016dt/DIg2500/Semester%20Website%20-%20Gintama%20Fan%20page/Games.html">Games</a> 
    </nav> 

Answer 1

Wie die Kommentare vorschlagen, wird using relative paths dieses Problem lösen.

Wenn Sie diese Website nur für den Zweck verwenden Ihre HTML-Dateien im Browser zu öffnen, ohne die Absicht, jemals auf einem Server-Hosting dann funktioniert die folgende:

Images/Gintoki.png 
home.html 

, aber die unten Der Vorschlag bezieht sich auf ein Ereignis, bei dem dieses Markup erneut verwendet und relativ zur Domäne geladen wird (auf einer Website gehostet oder über einen lokalen Webserver geladen). In diesem Fall verwenden Sie einen relativen Pfad URI:

<ul> 
    <li><img src="/Images/Gintoki.png">Sakata Gintoki</li> 
    <li><img src="/Images/Kagura.jpg">Kagura</li> 
    <li><img src="/Images/Shinpachi.jpg">Shimura Shinpachi</li> 
</ul> 

<nav> 
    <a href="/home.html">Home</a> | 
    <a href="/Gintama.html">Gintama The Show</a> | 
    <a href="/Games.html">Games</a> 
</nav> 

Dadurch verschachtelte Verzeichnis/Pfade ermöglicht es, die Dateien relativ zum Verzeichnis laden sie aus und nicht den Weg serviert wir Sie, die es angefordert hat wird. Normalerweise ist es am besten, Ihre Website so zu testen, als ob Sie sie live hosten würden.

Das Starten eines statischen Webservers im Stammverzeichnis der Website, z. B. python -m SimpleHTTPServer, ist eine großartige Möglichkeit, sicherzustellen, dass alles live funktioniert.

Eine Erklärung für die Ausgabe Sie sehen nur, dass die anderen Computer die Dateien in einem anderen Verzeichnis befinden, wahrscheinlich so etwas wie so:

file:///Users/MyOtherComputer/Desktop/Summer%202016dt/DIg2500/Semester%20Website%20-%20Gintama%20Fan%20page/home.html 

Als Ergebnis der Bilder auf einen Pfad zeigen absoluten zu Ihrem anderen Computer fordert der Browser das Bild vom ursprünglichen Ziel an, und da es nicht dort ist, wird eine 404 (Not Found) zurückgegeben.