Как вставить фото на сайт html

Как с помощью javascript вставить картинку в html страницу

Чтобы вставить изображение на HTML-страницу с помощью JavaScript, вы можете использовать следующий код:

Этот код создает элемент img с помощью метода document.createElement, устанавливает для его атрибута src путь к файлу изображения (например, «image.jpg»), а для его атрибута alt — описание изображения. Затем он добавляет изображение в тело HTML-документа с помощью метода appendChild.

Кроме того, вы можете вставить изображение, используя свойство innerHTML, например:

document.body.innerHTML ='';
 

Чтобы вставить изображение на HTML-страницу с помощью jQuery, вы можете использовать следующий код:

$('',{
src:'image.jpg',
alt:'Example image'
}).appendTo('body');
 

Этот код создает новый элемент img с использованием синтаксиса $(») и устанавливает его атрибуты src и alt. Затем он добавляет изображение к элементу body HTML-документа с помощью метода appendTo.

Вы также можете встроить картинку, используя метод html следующим образом:

$('body').html('');
 

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

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

2. В поле текстового контента поместите курсор в место, куда Вы планируете вставить картинку.

3. На панели инструментов текстового редактора нажмите на кнопку «Вставить/редактировать изображение»

4. В появившемся окне в правой части поля «Источник» нажмите по кнопке «Обзор».

5. В окне «Файловый менеджер» Вам доступны следующие функции для работы с базой изображений:

• Поиск картинок в текущей папке;
• Создание папки;
• Выбор папки для загрузки в нее изображения;
• Добавление картинок в текщую папку.

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

При создании папки следует учесть 2 момента:

• Папка создается относительно текущей папки, например в графе «Текущая папка» у Вас написано /images — это означает, что папка, создаваемая Вами будет размещена в корне каталога и адрес картинки будет иметь следующий вид: /images/papka/foto.jpg.
• Название папки указывается на латинском языке

Чтобы создать новую папку для хранения изображений Вам необходимо кликнуть по кнопке «Создать папку», в открывшемся окне указать только название новой папки латинскими символами или цифрами.

6. Для добавления картинки в текущую папку необходимо кликнуть по кнопке «Загрузить изображение», в открывшемся окне нужно перетащить картинку в поле или щелкнуть по полю левой кнопкой мышки для того чтобы воспользоваться функцией «Обзор».

7. Вернитесь к списку файлов и выбрать загруженную картинку в общем списке (кликнуть по изображению левой кнопкой мыши).

8. В окне «Вставить/редактировать изображение» в поле «Источник» будет указан путь к выбранной Вами картинке. Кроме того, Вам доступно редактирование некоторых параметров картинки:

• Текст из поля «Описание изображения» используется в качестве содержимого для html-тега «alt» (этот тег используется поисковыми системами);
• Параметры «Размер» отвечает за то, какие размеры будут у картинки при просмотре на сайте (по умолчаю используются параметры исходного изображения);
• При включеном параметре «Сохранять пропорции» ширина и высота картинки привязываются друк к другу. Так при изменении ширины картинки, ее высота автоматически будет пересчитана на пропорциональную величину, и соотношение сторон картинки останется неизменным;
• Параметр «Создать превью» отвечает за функцию, которая позволяет открывать на сайте полноразмерное изображение при клике левой кнопкой мыши по миниатюре.

9. После изменения параметров картинки (по желанию), нажмите кнопку «Ок» и сохраните изменения, внесенные в раздел.

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

Как вставить изображение на веб-сайт

Данная статья является логическим продолжением статьи «Как уменьшить размер изображения без Photoshop». Доступность больших и качественных фотографий с бесплатных фотостоков или прямо с вашей камеры, может породить неприятную проблему для начинающих верстальщиков. Так как они больше фокусируются на верстке и мало уделяют внимания оптимизации сайта.

Надеюсь, что предыдущая статья раскрыла тему оптимизации изображений. Сегодня мы научимся вставлять уже оптимизированное изображение на HTML страницу. Подробно разберем с помощью каких тегов и атрибутов это можно сделать. Создадим проект в редакторе кода (я использую VS Code) с HTML страницей и одной картинкой внутри папки images.

Обязательные атрибуты для тега img

Для того, чтобы вставить изображение на страницу используется одинарный тег img с двумя обязательными атрибутами.

• src — сокращение от слова source (источник), который указывает путь к изображению
• alt — сокращенное название слова alternative, переводится как альтернатива

Пользователь зайдя на сайт, увидит на странице картинку, которую мы указали.

Если изображение wedding_invite.jpg по какой-то причине не отобразится в браузере, то на странице будет показан альтернативный текст «Свадебное приглашение». Атрибут alt участвует в поиске по картинкам в поисковых системах. Если вы хотите, чтобы на ваш сайт могли выйти посетители через Google картинки, то писать альтернативный текст надо осмысленно.

У тега img еще есть атрибут title, который работает при наведении курсора. В него обычно вставляют уточняющую версию альтернативного текста.

Теоретически существующие атрибуты для тега img

Все эти атрибуты о которых сейчас пойдет речь могут работать внутри тега img, но использовать их в HTML разметке, считается дурным тоном. Такие атрибуты как, width, height, align, vspace и hspace нужно выносить в CSS код.

Атрибуты width и height

Атрибуты width|height отвечают за ширину|высоту изображения. В качестве их значений нужно указывать размеры картинок в пикселях. В этом случае на HTML странице реальные размеры картинок будут соответствовать, тем что прописаны в атрибутах.

Но есть вариант, что мы можем принудительно изменить визуально отображаемое изображение, указав совсем другие размеры, как правило в меньшую сторону (без потери качества). Я физически не изменяю размеры изображения, а уменьшаю только визуальное отображение размера картинки до 150 пикселей. Мне не нужно держать на хостинге большую и маленькую версию одной и той же картинки. Из большой картинки я могу получить много маленьких картинок разных размеров, не нарезая их физически.

Если у вас не квадратное изображение, то нужно указать либо ширину, либо высоту. Браузеры умеют автоматически вычислять пропорции картинок и подставлять нужное значение. Иначе мы рискуем получить непропорциональное изображение.

Атрибуты align, vspace, hspace

Для демонстрации работы атрибутов align, vspace и hspace, нужно картинку вставить в текст.

здесь рыбный текст

Для красоты, нужно чтобы текст обтекал картинку слева align=»left», а между текстом и картинкой стояли отступы.

здесь рыбный текст

На практике эти устаревшие атрибуты, все еще используются в вёрстке email писем. Поскольку почтовая программа Microsoft Outlook не признает CSS код и блочную верстку.

Создано 06.01.2021 10:42:20

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Как дать пользователю вставлять картинку на сайте? [закрыт]

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

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

Я хочу сделать страницу профиля, что бы пользователь мог загрузить своё фото на аватар, подскажите, как это сделать? В сети(скорее всего я криворукий, и плохо искал) ответа я не нашел.

Отслеживать
задан 19 мар 2018 в 13:52
362 1 1 золотой знак 5 5 серебряных знаков 26 26 бронзовых знаков
Вы в документацию заглядываете хоть иногда? php.net/manual/ru/features.file-upload.post-method.php
19 мар 2018 в 13:59
19 мар 2018 в 15:21
19 мар 2018 в 15:22

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

1. Делаем загрузчик ( )
2. На стороне сервера проверяем что это такое нам прислали — должна быть картинка
3. Сохраняем ее на сервер, ее адрес сохраняем в базу
4. При генерации любого элемента, в котором есть профиль пользователя подтягиваем нужную картинку и вставляем туда

Отслеживать
ответ дан 19 мар 2018 в 13:56
Michael Vaysman Michael Vaysman
1,637 11 11 серебряных знаков 19 19 бронзовых знаков
подскажите, а где можно по подробнее почитать?
19 мар 2018 в 13:59

Сначала прочитайте про input type=file. Потом смотрим как на сервер получаем файл. Потом посмотрите как на клиенте и сервере валидировать полученный файл. Потом смотрим как сохранять файлы на сервере. Потом посмотрите как писать и читать в базу данных. Ну а потом я думаю уже будет все понятно 🙂 Все это в гугле конечно же можно найти.

19 мар 2018 в 14:02
Нет, тут нужно сначала про http протокол почитать, а не соц.сеть делать сразу
19 мар 2018 в 14:03

Мне кажется, что сначала надо что-бы человек что-то сделал, у него получилось, он увлекся, а потом он уже и сам начнет копать и прот протоколы и про другие «страшные» вещи 🙂