Как скопировать ссылку на изображение для html

Как вставить картинку на сайт | HTML

Каждая страница в интернете имеет свой адрес. Его называют . Он показан в адресной строке браузера (подробнее о том, что такое адресная строка браузера и где она находится).

Это делает возможным внутри одной страницы отображать содержимое другой страницы. Например:

Большинство изображений, которые человек видит на сайтах, тоже являются содержимым другой страницы. Вот, в частности, адрес смайлика в формате .gif:

http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif

Как узнать адрес картинки и скопировать его

Скопировать адрес изображения можно несколькими способами:

1. Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено скопировать URL, щёлкнуть по необходимому пункту.
2. Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено изучить характеристики фотографии, щёлкнуть по необходимому пункту (на Рис.1 cм. пункт «Информация об изображении»; в Internet Explorer см. пункт «Свойства»), в открывшемся окне выделить адрес рисунка,
   • нажать на правую клавишу мышки, в появившемся контекстном меню щёлкнуть по пункту «Копировать».
   • нажать комбинацию клавиш клавиатуры Ctrl + C .

   

3. Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено перейти на страницу картинки, щёлкнуть по необходимому пункту (на Рис.1 cм. пункт «Открыть изображение»). Откроется страница, содержимым которой будет лишь одно изображение. В полный рост, если ранее оно было уменьшено с помощью атрибутов height и width или с помощью CSS. Выделить адрес открывшейся страницы в адресной строке браузера,
   • нажать на правую клавишу мышки, в появившемся контекстном меню выбрать пункт «Копировать».
   • нажать комбинацию клавиш клавиатуры Ctrl + C .

   

4. На сенсорных устройствах (смартфон, планшет) долго без движения держать палец над фото, в появившемся контекстном меню будет предложено перейти на страницу картинки, щёлкнуть по необходимому пункту (он может называться «Просмотр картинки»). Откроется страница, содержимым которой будет лишь одно изображение. В полный рост, если ранее оно было уменьшено с помощью атрибутов height и width или с помощью с помощью CSS. Затем долго жать на адрес в адресной строке браузера. После того, как появятся ползунки и весь URL будет выделен (в случае необходимости, ползунки можно раздвинуть на необходимое расстояние), щёлкнуть в появившейся панели кнопку «Копировать».
5. Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено перейти на страницу фонового изображения, щёлкнуть по необходимому пункту. Откроется страница, содержимым которой будет лишь одно изображение. В полный рост, если ранее оно было уменьшено с помощью с помощью CSS. Выделить адрес открывшейся страницы в адресной строке браузера (см. Рис.3),
   • нажать на правую клавишу мышки, в появившемся контекстном меню выбрать пункт «Копировать».
   • нажать комбинацию клавиш клавиатуры Ctrl + C .

   

6. Из исходного кода страницы сайта.

Как сохранить изображение

Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено сохранить картинку, щёлкнуть по необходимому пункту (на Рис.1 cм. пункт «Сохранить изображение как. »), в открывшемся окне выбрать папку на компьютере, куда будет сохранён рисунок.

Если фотография является фоновой картинкой, то нужно предварительно перейти на страницу картинки (см. Рис.3).

Как добавить картинку на веб-страницу

Сначала изображение нужно загрузить с компьютера на хостинг сайта, в социальную сеть (ВКонтакте, Google+ и т.п.), Яндекс.Диск или Гугл.Диск, чтобы у рисунка появился свой адрес в интернете.

Если есть визуальный редактор, то очерёдность действий обычно следующая:

1. установить курсор мышки в то место, где должна будет появиться фотография,
2. нажать на иконку, похожую на или на ,
3. выбрать файл с компьютера,
4. если есть возможность, заполнить альтернативный текст (он же описание изображения).

Итог: картинка будет вставлена на страницу сайта, а самое главное — загружена на сервер веб-проекта. У неё теперь будет свой адрес в интернете. И теперь можно на вкладке «HTML» поправить предоставленный визуальным редактором код, так как часто визуальный редактор добавляет ненужные теги, да и возможности HTML и CSS несравнимо большие.

• на некоторых сайтах может быть запрещено использование адреса изображений на других ресурсах (подробнее про запрет хотлинкинга [wikipedia.org]).
• сайты недолговечны и спустя время с удалением веб-проекта, исчезнет и картинка на вашем сайте, оставив вместо себя в лучшем случае только альтернативный текст.

1. создать папку image ,
2. создать в папке image файл .htaccess , содержимым которого будет

# закрыть доступ к http://сайт.ru/image/ Options -Indexes # закрыть доступ к http://сайт.ru/image/.htaccess order allow,deny deny from all 

Как получить ссылку на изображение, зная ссылку на HTML страницу её содержащую? [закрыт]

Закрыт. На этот вопрос невозможно дать объективный ответ. Ответы на него в данный момент не принимаются.

Хотите улучшить этот вопрос? Переформулируйте вопрос так, чтобы на него можно было дать ответ, основанный на фактах и цитатах.

Закрыт 7 лет назад .

У меня есть массив ссылок на сайт, на котором сделан скриншот, такого типа: мне надо получить ссылку, которая у них в body хранится на само изображение http://image.prntscr.com/image/f81b70e684b64ddf8ef64e1e2334a5d6.png в целом, ссылку можно получить просто нажав «скопировать ссылку на изображение» таких ссылок у меня 800 штук. Руками нераельно делать. как мне программно лучше всего получить? Сайты никгода не парсил, но на уровне алгоритма все понятно. Можете покидать референсы, что посмотреть лучше всего в моем случае. Язык — пайтон

Как копировать ссылку из background-image?

Тоже самое по ходу не как

Ivan00028 @Ivan00028 Автор вопроса

Renat Grishin, перепутал не работе пишет в мозиле
Uncaught SyntaxError: redeclaration of let imgArr
debugger eval code:1

Ivan00028, Странно, давай попробуем просто найти все элементы

const elemLink = document.querySelectorAll(".gift"); elemLink

Ivan00028 @Ivan00028 Автор вопроса

NodeList(40) [div.gift, div.gift.js-call, div.gift, div.gift, div.gift.js-call, div.gift.js-call, div.gift, div.gift.js-call, div.gift.js-call, div.gift.js-call, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift, div.gift]

Ivan00028 @Ivan00028 Автор вопроса

Renat Grishin,

Ivan00028, Прекрасно, это значит что элементы он у нас находит
Давай попробуем вывести ссылки картинки в консоль, при клике на элементы которые соержут у себя фотонм картинку

const elemLink = document.querySelectorAll(".gift"); // ищем все элементы с классом gift elemLink.forEach(elem=> < // перебираем все полученные элементы if(elem.style.backgroundImage)< // проверяем есть ли у этих элементов стиль background-image elem.onmousedown = function(e) < if (e.which == 3) < // Нажата правая кнопка мыши let imgLink = elem.style.backgroundImage.slice(7,-2); console.log(imgLink) >> > >);

Ivan00028 @Ivan00028 Автор вопроса
Renat Grishin, не получается
undefined
Ivan00028 @Ivan00028 Автор вопроса

Renat Grishin,

Ivan00028, это норм что undefined выходит, мы в кносоли по итогу скрипта ничего не возвращаем для вывода
После того как ввели этот код в консоль, попробуй нажать правой кнопкой мыши по элементу с классом gift у которого фоном есть картинка. Должно в консоль выпасть ссылка

Ivan00028 @Ivan00028 Автор вопроса
Renat Grishin, Не чего не выпадает сделал как вы сказали
Ivan00028 @Ivan00028 Автор вопроса

Renat Grishin, заработало в другом браузере а как в буфер что бы сохраняло а не в консоль выводило ? и появляются две ссылки а картинка одна.

Ivan00028 @Ivan00028 Автор вопроса
Renat Grishin, А можно как нибудь копировалось в буфер при нажатии правой кнопкой ссылка ?

Ivan00028, Для передачи данных в буфер обмена можно воспользоваться navigator.clipboard.writeText(«Текст который уйдет в буфер обмена»);

const elemLink = document.querySelectorAll(".gift"); // ищем все элементы с классом gift elemLink.forEach(elem=> < // перебираем все полученные элементы if(elem.style.backgroundImage)< // проверяем есть ли у этих элементов стиль background-image elem.onmousedown = function(e) < if (e.which == 3) < // Нажата правая кнопка мыши let imgLink = elem.style.backgroundImage.slice(7,-2); navigator.clipboard.writeText(imgLink); // копируем ссылку в буфер обмена >> > >);

И тут есть один нюанс. Браузеры защищают пользователя от копирования данных в буфер. И для того чтобы пользователь смог скопировать данные 2ой кнопкой мыши, он должен хотя бы раз кликнуть по сайту.

Ivan00028 @Ivan00028 Автор вопроса

только так выдает ошибку

Ivan00028 @Ivan00028 Автор вопроса

Renat Grishin, Все работает но когда код запускаешь на телефоне сенсором не работает прикосновение можешь помочь?

Ivan00028, Можно добавить еще один слушатель событий касания

const elemLink = document.querySelectorAll(".gift"); // ищем все элементы с классом gift elemLink.forEach(elem=> < // перебираем все полученные элементы if(elem.style.backgroundImage)< // проверяем есть ли у этих элементов стиль background-image let imgLink = elem.style.backgroundImage.slice(7,-2); elem.onmousedown = function(e) < if (e.which == 3) < // Нажата правая кнопка мыши navigator.clipboard.writeText(imgLink); // копируем ссылку в буфер обмена >> elem.addEventListener('touchstart', e=> >); > >);

Загружайте и делитесь изображениями.

Начните загружать изображения простым перетаскиванием в любое место окна прямо сейчас. Ограничение на размер изображения 32 MB. После загрузки, Вам будут доступны прямые ссылки, BB-коды и миниатюры.

Вы также можете обзор изображений с компьютера или добавить ссылки на изображения.

Нажмите на миниатюру, чтобы отредактировать изображение или изменить его размер

Вы можете добавить изображения с вашего компьютера или добавить ссылки на изображения.

Загружается 0 изображение ( 0 % завершено)

Загружается очередь изображений. Это может занять некоторое время.

Загрузка завершена

Вы можете создать новый альбом с загруженным содержимым. Вы должны создать аккаунт или войти, чтобы сохранить это содержимое в свой аккаунт.

Не было загружено ни одного изображение .

Some errors have occurred and the system couldn’t process your request.