Что делать если не добавляется изображение html
Перейти к содержимому

Что делать если не добавляется изображение html

  • автор:

Не отображается изображение как background [закрыт]

Скорее всего, данный вопрос не соответствует тематике Stack Overflow на русском, согласно правилам описанным в справке.

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

    Nick Web Studio   
#block < background-image: url ('/images/nws_head.png'); >

Не отображает картинку. Правильность пути я проверил, background, background-image менял, кавычки ‘ » пробовал, без кавычек тоже пробовал, убирать слеш перед путем — тоже пробовал, однако изображение не отображается. В чем проблема? Обновление Ничего не понял, пробовал и высоту с шириной ставить, не помогло. код сейчас выглядит так:

#block < background-image: url (images/nws_head.png); width: 80%; height: 120px; >

Отслеживать
6,488 6 6 золотых знаков 24 24 серебряных знака 31 31 бронзовый знак
задан 7 сен 2013 в 15:06
nicksemkin nicksemkin
21 1 1 золотой знак 1 1 серебряный знак 3 3 бронзовых знака
@nicksemkin, Чтобы отформатировать код, выделите его мышью и нажмите на кнопку <> редактора.
7 сен 2013 в 15:39
# форматируйте код, уважайте других участников
7 сен 2013 в 16:07

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

8 ноя 2015 в 20:14

4 ответа 4

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

Первым делом откройте инспектор браузера ( в Chrome f12 ).
Если картинка не загружается, то в консоли выведется ошибка ( вкладка console ). Если там ошибок нет — идем дальше

Поставьте фиксированные размеры для блока

#block < /* для теста лучше вообще удалить пока остальные стили */ width: 100px; height: 100px; background-image: url(images/nws_head.png); background-size: 100%; background-position: center; >

Проверьте еще, загружаются ли у вас вообще стили. ( опять же в консоли f12 )

P.S.

На дворе уже 2015, HTML5 как год уже стандарт, не бойтесь его использовать

Отслеживать
ответ дан 9 окт 2015 в 4:32
12.3k 1 1 золотой знак 21 21 серебряный знак 40 40 бронзовых знаков

Блок имеет заданую ширину и высоту (если вдруг у него position: absolute|fixed)?

Сам путь к CSS файлу указан верно? (заметьте, там нет слэша)

Обновление

div#block 

Путь к картинке указываем относительно css файла (без ./ тоже можно, но в шапке вопроса вы его задали вообще от корневой директории).

Добавил «div», чтобы парсер не съел, он там необязателен.

Отслеживать
51.3k 87 87 золотых знаков 267 267 серебряных знаков 505 505 бронзовых знаков
ответ дан 7 сен 2013 в 15:16
2,818 11 11 серебряных знаков 16 16 бронзовых знаков
Дочитал, спасибо)
7 сен 2013 в 15:31
dekameron, не помогло:(
7 сен 2013 в 16:26

Сначала делаем так: пробуем из браузера пройти по пути к картинке и посмотреть отображается ли она. Если браузер пишет 403 или 404 значит путь указан неверно или не хватает прав доступа.

Если все гуд, тогда смотрим код и устанавливаем для начала блочный тип элемента не static а именно block устанавливаем высоту и ширину и проверяем отображается ли в блоке, если в блоке не отображается открываем инспектор скажем в хроме или в лисе и смотрим загрузило ли картинку и в консоли смотрим не зачеркнута ли она. Если зачеркнута ищем причину.

Отслеживать
ответ дан 8 ноя 2015 в 20:22
3,890 14 14 серебряных знаков 23 23 бронзовых знака

background: url(../images/foto1.jpg); 

Оформление незагруженных изображений

Эта картинка не загрузилась. Безобразие, правда?

Но им необязательно всегда быть такими. Можно воспользоваться CSS для оформления элемента , чтобы впечатление от них было лучше, чем по умолчанию.

Пара фактов об элементе

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

  1. К элементу можно применять обычное шрифтовое оформление. Эти стили применяются к альтернативному тексту в случае его отображения, и не влияют на рабочее изображение.
  2. Элемент замещаемый. Это элемент, «внешний вид и размеры которого определяются внешними ресурсами» (Sitepoint). Поскольку элемент управляется внешним источником, псевдоэлементы :before и :after , как правило, к нему не применяются. Однако, когда изображение не загружается из-за сбоя, эти псевдоэлементы могут отобразиться.

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

Применим это на практике

Учитывая эту информацию, вот некоторые примеры оформления незагруженных картинок, со следующим неправильным адресом:

 Канье смеётся

Добавление полезной информации

Один из способов обработать незагруженные изображение — сообщить пользователю, что изображение не загружено. С помощью выражения attr() можно даже отобразить ссылку на незагруженное изображение.

Извиняюсь, но картинка ниже не загружается

img < font-family: 'Helvetica'; font-weight: 300; line-height: 2; text-align: center; width: 100%; height: auto; display: block; position: relative; >img:before < content: "Извините, изображение не загруженно :("; display: block; margin-bottom: 10px; >img:after

Размещение альтернативного текста по умолчанию

Кроме того, можно использовать псевдоэлементы, чтобы заменить дефолтный текст в alt , спозиционировав псевдоэлемент поверх дефолтного текста, закрывая его.

Канье смеётся

img < /* те же стили, что и в первом примере */ >img:after

Дополнительное оформление

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

Незагруженная картинка, на которой Канье смеется

img < /* те же стили, что и в первом примере */ min-height: 50px; >img:before < content: " "; display: block; position: absolute; top: -10px; left: 0; height: calc(100% + 10px); width: 100%; background-color: rgb(230, 230, 230); border: 2px dotted rgb(200, 200, 200); border-radius: 5px; >img:after

Если изображение загружается, при всех тех же стилях для элемента, тогда картинка отображается как обычно. Псевдоэлементы вообще не генерируются.

Screen-Shot-2016-02-27-at-12-42-08

Поддержка браузерами

К сожалению, не все браузеры обрабатывают незагруженные изображения одинаково. В некоторых браузерах, даже если картинка не загружается, псевдоэлементы вообще не отображаются.

Вот результаты моих тестов:

Браузер Текст в Alt :before :after
Chrome (Компьютер и Android)
Firefox (Компьютер and Android)
Opera (Компьютер)
Opera Mini ✓ **
Safari (Компьютер and iOS) ✓ *
iOS Webview (Chrome, Firefox, другие) ✓ *

* Текст в alt отобразится только в том случае, если он умещается в ширину изображения.

** Шрифтовое оформление не применяется.

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

P.S. Это тоже может быть интересно:
  • CSS-выражения от контейнера для дизайнеров
  • «Запашки» кода React-компонентов
  • Новогодние подарки Рабочей группы CSS: значения и единицы 4 уровня, медиавыражения 4 и 5 уровней

Если вам понравилась статья, поделитесь ей!

Подбираем картинки для письма и оформляем email-рассылку с помощью изображений

Обычное текстовое письмо может выполнять свою функцию, но рассылка с картинками воспринимается намного лучше и доносит информацию эффективнее. Хотите, чтобы вашим подписчикам было легко дочитывать ваши сообщения – научитесь подбирать изображения и делать красивую верстку писем.

Можно ли обойтись без картинок?

Без картинок письмо будет выглядеть так:

Простое текстовое сообщение от онлайн-школы

Простое текстовое сообщение от онлайн-школы

А вот красиво оформленная брендированная рассылка:

Письмо с красочным изображением и выделяющимся предложением от авиаперевозчика

Письмо с красочным изображением и выделяющимся предложением от авиаперевозчика

Второе письмо выглядит намного эффектнее. Почему? Вот неполный список функций, которые выполняет картинка в теле письма:

  • позволяет быстро схватить смысл письма
  • привлекает внимание
  • дополняет информацию
  • демонстрирует товар
  • иллюстрирует ситуации
  • вызывает эмоции

Иллюстрированные рассылки работают лучше, кроме логики, это показывают и исследования :

  • 90 % информации, которую мы воспринимаем, – визуальная, мозг обрабатывает ее в 60 000 раз быстрее текста
  • 40 % людей лучше реагируют на картинки, чем на буквы
  • 46,1 % готовы доверять компании, которая красиво оформляет рассылку
  • 12 % дополнительного трафика получают материалы с инфографикой

Изображения – не только красивый атрибут в теле письме, но самостоятельный мощный маркетинговый инструмент:

  • картинки удерживают внимание на время, необходимое для принятия решения – читать письмо или нет, это решающие 3 секунды для вовлечения новых подписчиков
  • фирменный стиль письма повышает узнаваемость бренда
  • на кликабельные картинки охотнее кликают, чем на обычные ссылки
  • правильное изображение усиливает текст и общий эффект письма
  • иллюстрированные рассылки повышают лояльность потенциальных клиентов и увеличивают продажи

Чтобы изображения делали рассылку эффективнее, нужно правильно их подбирать и оформлять.

Каким должно быть изображение для email-рассылки

Существует несколько общих требований к картинкам для рассылки.

Маркетинговая составляющая

Первое впечатление о рассылке человек получает, увидев Hero Shot – главное изображение письма. По этой картинке он должен сразу понимать, о чем текст.

Напоминание от Спортмастера об оставленной корзине

Напоминание от Спортмастера об оставленной корзине

Критерии хорошего главного баннера:

  • с первого взгляда понятно, о чем идет речь
  • образы простые и хорошо читаются
  • использованы фирменные цвета или цвета, связанные с чувствами и эмоциями, или какое-то интересное живое изображение, которое цепляет внимание и иллюстрирует идею письма
  • яркое и оригинальное исполнение

Размеры изображения

Лучше использовать исходники нужного размера. То есть не менять длину и ширину картинки для письма при верстке с помощью HTML и CSS, а подогнать изображение заранее в редакторе – Canva, Photoshop, Figma. У такого решения несколько плюсов:

  • картинка отобразится корректно в исходном виде у пользователей Outlook
  • если изображение не отобразится, на его месте будет прямоугольник такого же размера, и верстка не «съедет»
  • не придется прописывать размеры в коде через «src»
  • картинка не потеряет в качестве при сжатии и не замедлит загрузку страницы

Для письма лучше использовать изображения весом не более 5 Мб. Чем легче картинка – тем быстрее прогрузится письмо. А в некоторых редакторах есть свои ограничения для этого параметра. Оптимально, если картинка будет не тяжелее 500 Кбайт.

Формат изображения

Наиболее популярные форматы:

  • jpg – подходит для фото, изображений с более чем 256 цветами, небольших файлов, но теряет качество при сжатии или масштабировании
  • png – подходит для текста, лого и небольших изображений, поддерживает прозрачный фон, сжимается без потери качества, но много весит и не подходит для больших изображений
  • gif – в дополнение к возможностям png еще и анимируется, но не поддерживает больше 256 цветов
  • svg – гибкий формат для файлов небольшого размера, хорошо масштабируется, но его поддерживают не все почтовые клиенты

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

Адаптивная верстка

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

  • ширина не более 600 пикселей
  • важная информация и призыв к действию размещаются в верхней части письма ― в мобильной версии письмо становится длиннее
  • большие кнопки призыва к действию – от 44 х 44 пикселей, чтобы можно было кликнуть пальцем по экрану телефона
  • адекватное количество изображений – чтобы не перегружать письмо
  • небольшое количество текста на картинке, если он есть, который легко читать с мобильного устройства
  • отдельно размещенная важная текстовая информация – так как картинка может не отобразиться
  • наличие описания (alt) – на случай, если изображение не прогрузится

Описание

Лучше заранее прописать к картинке фон для alt-текста, который пользователь увидит вместо пустого поля, и alt-текст, чтобы передавал смысл изображения.

Текст, который отображается на месте картинки, если она не прогрузилась, прописывается через атрибут «alt». Он должен быть точным и понятным, так как поможет подписчикам ориентироваться в письме.

Отображение alt-текста – слева, описания – справа

Отображение alt-текста – слева, описания – справа

Через атрибут «title» прописывается описание – текст, который появляется, если навести курсор на картинку. Это дополнительная информация, которая не играет решающей роли в письме.

Как вставить картинку в тело письма

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

Вставить картинку в письмо ссылкой

Она укажет путь к файлу. Ссылка прописывается в отдельной строке HTML-кода через «src» и имеет следующий вид:

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

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

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

Прикрепить изображения для рассылки к письму

Картинку можно вставить в электронное письмо, прикрепив файлом. В коде появится строка следующего вида:

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

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

Вставить картинку в текст письма в Sendsay

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

  • в HTML-редакторе
  • в блочном редакторе
  • выбрать базовый или тематический шаблон в галерее

Не отображается картинка

Author24 — интернет-сервис помощи студентам

Не отображается картинка
Я поставил visibility: visible, но не отображается фото, что делать? Помогите пожалуйста. PS.

Картинка не отображается
Привет, по ссылке http://r.ournet.biz/123hMqF в раздел "Învârtite — Învătită cu prune" при нажатие.

Не отображается картинка
Перестали отображаться картинки в HTML. Код такой: <td width="335" align="center".

Не отображается картинка
Пытаюсь вставить картинку с меню(menu),но она не отображается,подскажите ,пожалуйста,в чем дело.

413 / 378 / 220
Регистрация: 18.07.2014
Сообщений: 1,259
diargon3454, а файл images/1.png у вас есть?
Регистрация: 30.09.2013
Сообщений: 519

Есть. Лежит там же где и html файл

Добавлено через 38 секунд
Ваще я думаю это из-за хостинга. Такое вообще может быть? Ведь код правильный

Добавлено через 58 секунд

ЦитатаСообщение от whiteapps Посмотреть сообщение

diargon3454, а файл images/1.png у вас есть?

Плюс, даже если не было — то что? Ведь должен отображаться такой блок где написано что картинка не найдена

75 / 75 / 11
Регистрация: 04.08.2012
Сообщений: 526
Записей в блоге: 2

вы говорите, что изображение лежит там где и html файл, а в коде написано, что она в папке images. Проверьте правильность тупи.

Регистрация: 30.09.2013
Сообщений: 519

Проблема была не из-за этого. Она даже была не в хостинге, не в коде. Это всё из-за грёбанного (другого слова не найду) интернет эксплорера.

413 / 378 / 220
Регистрация: 18.07.2014
Сообщений: 1,259

ЦитатаСообщение от sashok89 Посмотреть сообщение

Проверьте правильность тупи.
Зигмунд Фрейд радостно потирает ладошки

Добавлено через 2 минуты
diargon3454, может поделитесь решением? что именно было не так с ие? кому-то это может оказаться полезным

Регистрация: 30.09.2013
Сообщений: 519
Забил на експлорер и пользуюсь гугл хромом

ЦитатаСообщение от whiteapps Посмотреть сообщение

что именно было не так с ие
Он не обновляет страницы
Задал вопрос в техподдержке майкрософт
Уже 3 дня молчат
413 / 378 / 220
Регистрация: 18.07.2014
Сообщений: 1,259

diargon3454, а что вы можете конкретнее описать что у вас происходит? ие можно обвинить во многих грехах, но я вам совершенно точно могу сказать что страницы он обновлять умеет.

Регистрация: 30.09.2013
Сообщений: 519
http://answers.microsoft.com/r. ac667e304e
То же самое произошло с картинкой. Может ты знаешь ответ
413 / 378 / 220
Регистрация: 18.07.2014
Сообщений: 1,259

diargon3454, попробуйте добавить на вашу страницу мета-тэги

1 2 3
meta http-equiv="Cache-Control" content="no-cache, no-store, max-age=0, must-revalidate"/> meta http-equiv="Pragma" content="no-cache"/> meta http-equiv="Expires" content="Fri, 01 Jan 1990 00:00:00 GMT"/>

это должно отключить кэширование

и не забудьте убрать их после релиза, отключать кэш для юзеров не хорошо

Регистрация: 30.09.2013
Сообщений: 519

Добавлено через 22 часа 59 минут
Не помогло

Эксперт HTML/CSS

2964 / 2597 / 1068
Регистрация: 15.12.2012
Сообщений: 9,863
Записей в блоге: 11

Лучший ответ

Сообщение было отмечено diargon3454 как решение

Решение

А у Вас проблема только с эксплорером? Просто помню на своей памяти один случай связанный с хостингом. Так вот, когда нарезался контент для сайта все картинки сохранялись через фотошоп с расширением пнг. Но когда сайт размещался на хостинге часть картинок пропадала, хотя на виртуальном сервере всё было нормально. Пути были прописаны правильно, картинки находились в нужной папке и с нужным расширением. Но так и не врубались, что же происходит. Причину бага выявили с помощью far manager. Как оказалось те картинки, что не отображались номинально имели расширение пнг, но выглядело это так «picture.PNG» вместо «picture.png». Как оказалось дело было в регистре расширения. Помогло переименование.

А чтобы эксплорер обновлял страницу почаще чистите кэш-браузера после изменений в коде.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *