Esiste un modo per utilizzare gli strumenti di sviluppo di Chrome per testare immagini diverse? Ho creato una nuova grafica di sfondo e vorrei testarla su un sito dal vivo che ha già una grafica di sfondo sul tag <body>. Non voglio ancora cambiare il sito dal vivo, comunque. Basta testarlo per vedere come appare la nuova immagine. È possibile?Verifica l'immagine di sfondo locale sul sito live con gli strumenti di sviluppo di Chrome?
È possibile sostituire l'url dell'immagine di sfondo nel pannello Elements con l'url dell'immagine che si desidera provare. Check this link per vedere come è fatto.
Questa modifica mostrerà l'effetto immediatamente nella finestra del browser. Come menzionato Johan Linder, dovrai ospitare l'immagine da qualche parte nel caso tu abbia l'immagine sul tuo computer.
nate wilton's answer indica correttamente come eseguire l'operazione utilizzando un'estensione di Chrome.
L'hosting dell'immagine da qualche parte non è necessario, basta usare l'URL 'file: //' (a meno che la pagina non abbia una rigida politica di sicurezza del contenuto). –
Non ho potuto ottenere 'file: //' per funzionare. Ho aperto l'immagine locale in Chrome e ho copiato l'URL ('file: /// Users/mcarroll/Desktop/SLAM!/BBB/background.png') nell'attributo dell'immagine di sfondo, ma non si caricava ancora. Ho finito per caricare il file su un altro sito, copiare l'URL e incollarlo nell'attributo. Questo ha funzionato bene. – mcography
@mcography: hai ragione, i criteri di sicurezza di Chrome non ti consentono di caricare risorse locali. Non penso che ci sia un modo per cambiare questo. –
Questa non è una risposta esatta alla tua domanda, ma un modo per farlo è usare qualcosa come dropbox public folder. Una volta che l'immagine è nella cartella, puoi semplicemente fare clic con il pulsante destro del mouse e copiare un URL pubblico da utilizzare negli strumenti di sviluppo.
Per motivi di usabilità/facilità nel trovare una soluzione, questa è una risposta fantastica. Grazie. Molto meno lo sforzo dell'estensione. –
Come ora dice il link in questa risposta, non ci sono più link pubblici Dropbox. – FTP
Non riesco a commentare quanto sopra a causa del sistema di reputazione dello stack-o, ma il metodo dropbox indicato sopra non funziona più. A partire dal 1 settembre 2017 i link pubblici sono stati disabilitati per tutti gli utenti. –
Ecco la risposta, per gentile concessione di Rob Donovan @ superutente (via https://superuser.com/a/839500/454034)
Dal momento che lei ha citato 'Chrome', è possibile utilizzare estensioni di Chrome per fare questo, per consentire l'accesso ai file locali.
procedere come segue:
1) nella cartella locale in cui l'immagine (s) sono, creare il file chiamato 'manifest.json' e immettere questo:
{
"name": "File Exposer",
"manifest_version": 2,
"version": "1.0",
"web_accessible_resources": ["*.jpg","*.JPG"]
}
2) Mettere questo è la vostra barra degli indirizzi chrome: chrome: // extensions/
3) assicurarsi che 'modalità sviluppatore' sia selezionata (in alto a destra della pagina)
4) Fare clic sul pulsante 'Carica estensione non pacchettizzata'
5) Passare alla cartella locale in cui l'immagine (s) e il file manifest.json è, fare clic su OK
6) L'estensione 'File Exposer' ora dovrebbe essere elencato nella lista, e hanno un segno di spunta su 'Abilitato'. Se la cartella si trova su un'unità di rete o su un'altra unità lenta o contiene molti file, potrebbero essere necessari 10-20 secondi o più nell'elenco.
7) Prendere nota della stringa "ID" che è stata associata al proprio interno. Questo è l'EXTENSION_ID
8) Ora nel tuo HTML è possibile accedere al file con il seguente, cambiando la 'EXTENSION_ID' a qualsiasi ID proprio interno generato:
<img src='chrome-extension://EXTENSION_ID/example1.jpg'>
nota, che il * .jpg ricorsivo e abbinerà automaticamente i file nella cartella specificata e in tutte le sottocartelle, non è necessario specificare per ogni sottocartella. Si noti inoltre che è sensibile al maiuscolo/minuscolo.
Nel tag 'img' non si specifica la cartella originale, relativa a quella cartella, quindi è necessario specificare solo le sottocartelle.
Se si modifica il file manifest.json, sarà necessario fare clic sul collegamento "Ricarica (Ctrl + R)" accanto all'estensione.
Funziona solo per le immagini in primo piano? Sto cercando di aggiungere al CSS ma non riesco a vederlo funzionare. Mi chiedo se funzionerà solo sul tag img? –
Questo è fantastico, grazie. Ho usato questa tecnica per collegare i CSS locali. C'è comunque da vedere aggiornamenti in tempo reale o un modo per aggiornare il css senza caricare il dom che ritorna al vecchio riferimento? – Rhys
Un'altra opzione potrebbe essere quella di avviare un semplice server http.
Nel terminale (o prompt dei comandi), cd nella directory in cui sono state salvate le immagini, quindi digitare python -m SimpleHTTPServer.
Ora è possibile fare riferimento alle immagini negli strumenti dev utilizzando http://localhost:8000/filename.jpg.
Possibile duplicato di [Estensioni di Google Chrome: impossibile caricare immagini locali con CSS] (http://stackoverflow.com/questions/3559781/google-chrome-extensions-cant-load-local-images-with-css) – koxt