Отображение изображения в html странице при верстке посредством python
Такой вопрос, познаю flask и python. Взяла за основу шаблон с bootstrap, в html коде нет изображений, решила добавить от себя и столкнулась с проблемами, изображение не отображается. Пробовала следующим образом:
Title of a longer featured blog pos
Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.
Создала папку в проекте — images, в нее добавила изображение photo1.jpg. Использовала pycharm в качестве среды. Подскажите, как правильно в таком случае вывести изображение на странице?
Отслеживать
задан 20 июн 2021 в 18:27
341 1 1 серебряный знак 13 13 бронзовых знаков
«images/photo1.jpg» может так? «/images/photo1.jpg» или так.
20 июн 2021 в 18:33
Как вы сохраняете изображения? или вы просто пытаетесь вытащить из папки?
21 июн 2021 в 0:25
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Разобралась в чем проблема. папку images нужно было не просто создать в папке проекта, а создать папку static (она у меня была создана под файлы css) и там уже создать папку images поместив в нее изображение. По итогу код в html файле, где необходимо отобразить изображение выглядит так:
Отслеживать
ответ дан 21 июн 2021 в 3:55
341 1 1 серебряный знак 13 13 бронзовых знаков
- python
- html
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
вывести картинку js
Для вывода картинки в JavaScript можно использовать элемент img и добавить его на страницу с помощью метода append() . Вот простой пример:
id="image-container">
// JavaScript const img = document.createElement('img'); img.src = 'path/to/image.png'; document.getElementById('image-container').append(img); Здесь мы создали элемент img , задали ему путь к картинке и добавили его внутрь элемента с id=»image-container» . Картинка будет отображена на странице внутри этого контейнера.
Обратите внимание, что путь к картинке указывается относительно положения файла JavaScript в структуре проекта.
Как вывести изображение в html
На днях нужно было вывести на печать купон со скидкой с сайта клиента. Не всю страницу целиком, а конкретную картинку. В итоге решил проблему посредством HTML + JavaScript. Эта задача может быть решена множеством способов.
Код решения, которое я выбрал представлен ниже.
Как использовать:
- Скопируйте данный код и поместите на свою страничку;
- Измените путь к картинке «images/slider/slider300.jpg» на свой (в теге img и в коде JavaScript).
- Пробуйте!
В ходе тестирования проблем не увидел, работает. Проверял в различных браузерах. Решил сохранить это решение, чтоб не потерялось.
Если кто предложит более интересное решение — буду рад 🙂
Пример работы (для деста кликните по картинке ниже):
Как вывести изображение в html?
С помощью socket.io я отправляю его на клиент
На клиенте я его принимаю
Вопрос:как мне вывести все эти изображения на экран в определенном блоке(all_image) ?
- Вопрос задан более трёх лет назад
- 92 просмотра
Комментировать
Решения вопроса 1
// arr = ["image/2.jpg", "image/1.jpg", "image/3.jpg"] all_image.innerHTML = arr.map(img => `
`).join('')Ответ написан более трёх лет назад
Алексей Кисилёв,
all_image это случайно не jquery объект?
тогда
all_image.html( arr.map(img => ``).join('') )должно работать, в любом случае эта строчка даст строку с img тэгами
Алексей Кисилёв @Reshk_0 Автор вопроса
hzzzzl,
Так не получилось,но зато помогло это