Ein Bild während der Webentwicklung austauschen

Question

Ich versuche zu sehen, wie eine bestimmte Webseite aussehen würde, wenn ich ein bestimmtes Bild durch ein anderes ersetzen würde. Anstatt das Bild hochzuladen, die Website usw. zu bearbeiten, möchte ich jedes Mal, wenn ich es optimiere, wissen, ob es eine Möglichkeit gibt, das Bild auf der Seite auf meine lokale Version zu ändern, während ich die entfernte Seite betrachte.

Ich benutze Firebug zum Debuggen von Web-Entwicklung in der Regel, aber ich bin offen für jedes andere Tool, das dies tun könnte.

(Es ist absolut unmöglich, diese zu suchen und alles anderes als Fragen zu dynamischem Bild Swapping auf einer bereitgestellten Website finden soll, so leid, wenn dies ein Duplikat ist.)

Hinzugefügt: Ich habe gerade versucht, ein file:/// Substitution URI zeigt auf das Bild (kopiert und eingefügt aus der Adressleiste nach dem manuellen Öffnen des Bildes), und leider hat es nicht funktioniert - das Bild ändert sich nicht.

Answer 1

Es scheint nur mit den http [s] -Protokollen zu arbeiten (wahrscheinlich aus Sicherheitsgründen). Sie können Ihre Bilder auf einem Dienst wie Dropbox speichern, das Bild oder den Ordner freigeben und dann die öffentlichen URLs verwenden.

Wirklich, Sie können alle Web-zugänglichen Bilder verwenden, so dass ein lokaler Server auch funktionieren würde.

Answer 2

Wenn Ihr Bild in einem Localhost-Server ist (nicht als Datei kümmern Sie sich) Ich denke, Sie können immer noch diese localhost URL in das Firebug Inspect-Element und es funktioniert.

Versucht einen absoluten Dateipfad, aber es funktioniert offenbar nicht. Ich denke, Sie müssen sich nur mit einem lokalen Hostserver-Image zufrieden geben. Das funktioniert für mich

Answer 3

Schnell und Lowtech Antwort: Machen Sie einen Screenshot der Seite öffnen Sie es in Photoshop und lassen Sie das lokale Bild auf einer Ebene über dem Bild der Webseite.

Answer 4

Hallo, wenn Sie von einem Webserver bedienen, können Sie es wahrscheinlich nicht auf eine Datei auf Ihrem lokalen Laufwerk zeigen. Selbst wenn es localhost ist, kann man beispielsweise nicht auf eine lokale Datei c: /test.jpg verweisen. Es ist, weil der Browser die Sandbox-Ur-Seite sortiert, so dass Skripte nicht auf lokale Dateien zugreifen können.

Eine Möglichkeit ist die neue Datei (new_file.jpg) auf den Webserver, geben dem Bild Link auf eine ID

<img id="something1" src="test.jpg"/> 

Mit jQuery im firebug sehen Fenster tun

$("#something1").attr("src","new_file.jpg"); 

Sie hochladen sollte das Bild ändern sehen. Wenn Sie jQuery nicht verwenden, können Sie document.getElementById ("something1") verwenden und das Element zum Ändern verwenden.

Answer 5

Ein anderer Weg ist http://makiapp.com/

Sie verwenden können von Ihrem Computer auf einer Website ein Bild überlagern Sie mit diesem zu sehen. Sehr cooles Tool, um eine Comp mit Ihrem Code in Verbindung zu bringen.

Answer 6

Sie können:

1. Ziehen Sie Ihre Testbild in Google Drive
2. öffnen es in einem Browser
3. Gehen Sie auf die tatsächlichen Bildpfad
4. Verwenden Sie diesen Pfad als Ersatz in Firebug

Es ist fast so schnell wie von einem lokalen Laufwerk arbeiten.