Можно ли использовать инструменты Chrome для тестирования различных изображений? Я создал новый фоновый рисунок, и я бы хотел протестировать его на живом сайте, на котором уже есть фоновая графика в теге <body>. Тем не менее, я не хочу менять сайт. Просто проверьте его, чтобы увидеть, как выглядит новое изображение. Возможно ли это?
Проверить локальное фоновое изображение на Live Site с помощью инструментов Chrome Dev?
Ответ 1
Вы можете заменить url фонового изображения на панели Elements на URL-адрес изображения, которое вы хотите попробовать. Проверьте эту ссылку, чтобы узнать, как это делается.
Это изменение немедленно покажет эффект в окне браузера. Как упоминалось Johan Linder, вам нужно разместить изображение где-нибудь, если у вас есть изображение на вашем компьютере.
ответ nate wilton правильно указывает, как это сделать, используя расширение Chrome.
Ответ 2
Вот ответ, любезно предоставленный Rob Donovan @superuser (через https://superuser.com/a/839500/454034)
Поскольку вы упомянули "Chrome", вы можете использовать расширения Chrome для этого, чтобы включить локальный доступ к вашим файлам.
Выполните следующие действия:
1) В локальной папке, где находятся ваши изображения, создайте этот файл с именем manifest.json и введите следующее:
{
"name": "File Exposer",
"manifest_version": 2,
"version": "1.0",
"web_accessible_resources": ["*.jpg","*.JPG"]
}
2) Поместите это адресная строка chrome: chrome://extensions/
3) Убедитесь, что установлен режим "Разработчик" (в правом верхнем углу страницы)
4) Нажмите кнопку "Загрузите нераспакованное расширение"
5) Перейдите в локальную папку, в которой находятся изображения и файл manifest.json, нажмите ok
6) Расширение "File Exposer" теперь должно быть указано в списке и иметь галочку напротив "Enabled". Если папка находится на сетевом диске или другом медленном диске или имеет много файлов, в списке может появиться 10-20 секунд или более.
7) Обратите внимание на строку "ID", которая была связана с вашим расширением. Это EXTENSION_ID
8) Теперь в вашем HTML вы можете получить доступ к файлу со следующим, изменив "EXTENSION_ID" на любой идентификатор, сгенерированный вашим расширением:
<img src='chrome-extension://EXTENSION_ID/example1.jpg'>
Обратите внимание, что *.jpg является рекурсивным и автоматически соответствует файлам в указанной папке и во всех подпапках, вам не нужно указывать для каждой подпапки. Также обратите внимание, что его чувствительность к регистру.
В теге "img" вы не указываете исходную папку, ее родственник из этой папки, поэтому необходимо указывать только вспомогательные папки.
Если вы измените файл manifest.json, вам нужно будет нажать ссылку "Обновить (Ctrl + R)" рядом с расширением.
Ответ 3
Это не точный ответ на ваш вопрос, но один из способов сделать это - использовать что-то вроде общей папки Dropbox. После того, как изображение находится в папке, вы можете просто щелкнуть правой кнопкой мыши и скопировать общедоступный url для использования в инструментах dev.
Ответ 4
Другой вариант - запустить простой HTTP-сервер.
В вашем терминале (или командной строке) cd в каталог, в котором сохранены ваши изображения, а затем введите python -m SimpleHTTPServer.
Теперь вы можете ссылаться на изображения в инструментах dev с помощью http://localhost:8000/filename.jpg.