Распространенный сценарий онлайн — у вас есть изображение на вашем сайте, на которое вы хотите сослаться. Возможно, вы кодируете страницу на своем сайте и хотите добавить это изображение, или, возможно, вы хотите сослаться на него с другого сайта, например, имеющейся у вас учетной записи в социальной сети. В любом случае, первым шагом в этом процессе является определение URL (унифицированного указателя ресурса) этого изображения. Это уникальный адрес и путь к файлу для этого конкретного изображения в Интернете. Давайте посмотрим, как это делается.
Начиная
Для начала перейдите на страницу с изображением, которое вы хотите использовать. Имейте в виду, однако, что вы должны использовать изображение, которое у вас есть. Это потому, что указание на изображения других людей считается кражей пропускной способности и может привести к проблемам — даже по закону. Если вы ссылаетесь на изображение на своем веб-сайте, вы используете свое собственное изображение и свою пропускную способность. Это нормально, но если вы переходите по ссылке на чужой веб-сайт, вы используете его пропускную способность для отображения этого изображения. Если у этого сайта есть месячные лимиты на использование полосы пропускания, которые налагают многие хостинговые компании , то вы принимаете их месячный лимит без их согласия. Кроме того, копирование изображения другого человека на ваш сайт может быть нарушением авторских прав. Если кто-то лицензировал изображениеиспользовать на своем сайте, они сделали это только для своего сайта. Ссылка на это изображение и встраивание его в ваш сайт, чтобы он отображался на вашей странице, выходит за рамки этой лицензии и может привести к судебным штрафам и штрафам. В итоге вы можете ссылаться на изображения, которые находятся за пределами вашего собственного сайта / домена, но в лучшем случае это считается грубым, а в худшем — незаконным, поэтому просто избегайте этой практики.
В этой статье мы будем предполагать, что изображения легально размещены на вашем собственном домене.
Теперь, когда вы понимаете «хитросплетения» ссылок на изображения, мы захотим определить, какой браузер вы будете использовать. Разные браузеры работают по-разному, что имеет смысл, поскольку все они являются уникальными программными платформами, созданными разными компаниями.
Поиск кода веб-изображения с помощью Chrome
По большей части, браузеры все работают примерно одинаково в наши дни. В Google Chrome это то, что мы будем делать:
-
Найдите изображение, которое вы хотите.
-
Щелкните правой кнопкой мыши на этом изображении ( Ctrl + клик на Mac).
-
Появится меню. В этом меню выберите « Копировать адрес изображения» .
-
Если вы вставите то, что сейчас находится в буфере обмена, вы обнаружите, что у вас есть полный путь к этому изображению.
Использование других браузеров
В Internet Explorer вы щелкаете правой кнопкой мыши по изображению и выбираете Свойства . В этом диалоговом окне вы увидите путь к этому изображению. Скопируйте адрес изображения , выбрав его и скопировав в буфер обмена.
В Firefox вы щелкните правой кнопкой мыши на изображение и выберите копировать расположение изображения .
Мобильные устройства еще более хитры, когда дело доходит до поиска пути URL-адреса, и, поскольку на рынке сегодня так много разных устройств, создание окончательного списка того, как найти URL-адрес изображения на всех платформах и устройствах, было бы непростой задачей. Однако во многих случаях вы касаетесь и удерживаете изображение, чтобы получить доступ к меню, которое позволит вам сохранить изображение или найти его URL.
Получив URL-адрес изображения, вы можете добавить его в HTML-документ . Помните, в этом и заключалась цель этого упражнения — найти URL изображения, чтобы мы могли добавить его на нашу страницу! Вот как добавить его с помощью HTML. Обратите внимание, что вы написали бы этот код в любом редакторе HTML:
<img src = "https://example.com/path/to/image.jpg"> alt = "Мое потрясающее изображение">
Между первым набором двойных кавычек вы должны вставить путь к изображению, которое хотите включить. Значение альт-текста должно быть описательным содержанием, объясняющим, что представляет собой изображение для того, кто на самом деле не видит его на странице.
Загрузите свою веб-страницу и протестируйте ее в веб-браузере, чтобы увидеть, если ваше изображение теперь на месте!
Полезные советы
Атрибуты ширины и высоты не требуются для изображений, и их следует исключать, если только вы не хотите, чтобы изображение отображалось с таким точным размером. С адаптивными веб-сайтами и изображениями, которые переформатируются и изменяют размеры в зависимости от размера экрана, это редко случается в наши дни. Скорее всего, вам лучше оставить ширину и высоту незаполненными, особенно если учесть, что при отсутствии какой-либо другой информации о размерах или стилях) браузер все равно будет отображать изображение в размере по умолчанию.