Отображать значок fa, если загрузка изображения не удалась

Я хочу отобразить значок fa, если загрузка изображения не удалась. Как и в атрибуте alt, текст появляется, если загрузка изображения не удалась, вместо этого я хочу показать значок fa. Если есть способ использовать js / jquery и т. д., Поделитесь. Код, который я использую:

<div class = "panel-body text-center" style = "background-color:#f99d1c;">
                        <?php if ($count>0){
                            echo "<img src='/presenations/$company/$curl/$fileurl' class='img-thumbnail' width='165px' class='img-thumbnail' alt='ERR_RLF'>";
                        }else{
                            echo "<i class='fa fa-video-camera fa-4x' style='color:#FFF;'></i>";
                        }?>
                        </div>

javascript php jquery html

03.04.2018 09:13

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 699

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я думаю, вы ищете атрибут onerror для элемента img.

Вот:

ОБНОВЛЕНО

Чистое JS-решение

function imgError(image) {
    image.outerHTML= '<i class = "fa fa-video-camera fa-4x"></i>';
    return true;
}

.red_block {
  background: red;
  padding: 10px;
}

<link href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet"/>


<!-- Image element with invalid path so it does not load and onerror gets call -->
<img src = "image.png" onerror = "imgError(this);"/>

<br>
<!-- Same thing with valid image path so it loads -->
<img src = "http://via.placeholder.com/350x150" onerror = "imgError(this);"/>

So what you need to replace here is HTML structure of fonts if you want anything else than this.

Это то, что я искал!

— 03.04.2018 09:29

Рад, что помог тебе!

— 03.04.2018 09:35

03.04.2018 09:21

Согласно @ divy3993. Вам просто нужно разместить загружаемый gif в фоновом режиме.

function imgError(image) {
    image.outerHTML= "<div class='red_block'></div>";
    return true;
}

.red_block {
  background: transparent url('http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif') center no-repeat;;
  padding: 110px;
}

<img src = "image.png" onerror = "imgError(this);"/>

03.04.2018 09:26

Другие вопросы по теме

Диапазон дат не работает должным образом с модулем администратора, функция до, не работает должным образом

Преобразование DateTime в формат даты и времени ISO 8601 с часовым поясом

Динамическое добавление полей для удаления полей выбора с помощью jQuery Ajax в PHP

Косвенное изменение перегруженного свойства App \ Dossier :: $ program не действует

Как исправить: разница между временем запроса и текущим временем слишком велика

Передавать глобальный пост между страницами

Codeigniter set_flashdata работает некорректно

Ошибка агрегирования Yii2 MongoDB

Маршруты POST не перечислены из корневого пути Laravel 5.2

Текстовое поле автозаполнения не работает в codeigniter

Отображать значок fa, если загрузка изображения не удалась

Ответы 2

Вот:

ОБНОВЛЕНО

Другие вопросы по теме

Похожие вопросы