CSS - фоновое изображение не отображается без ошибок

Question

У меня есть приложение HTML, CSS, JS, работающее с Cordova. Я пытаюсь показать изображение значка WhatsApp на странице, используя фоновое изображение CSS.

Изображение загружено. Однако изображение не отображается, и на консоли не отображается ошибка доступа к изображению, запрещенного, изображение не найдено и т. Д ...

• Я пытался показать изображение, используя <img /> Но безрезультатно.
• Я пытался использовать это свойство css: background-size: contain !important;
• Я пытался изменить значение background-position.
• Я пытался использовать background-image во встроенном стиле css элемента.
• Я пытался добавить текст к элементу <a>.

Никто из них не работал!

Вот мой код:

.whatsapp-icon {
  background-size: contain;
  border-radius: 5px;
  margin-top: 10px;
  height: 35px;
  width: 35px;
  display: block;
  float: right;
  text-decoration: none;
}

<div class='theDownBar'>
  <a style='background-image: url(img/whatsapp-icon.png);' href='https://api.whatsapp.com/send?phone=phonenumber' class='whatsapp-icon'></a>
</div>

РЕДАКТИРОВАТЬ: Добавлено несколько изображений для уточнения

Элемент показывает и имеет ширину и высоту

Нет ошибки консоли, и изображение успешно загружается при проверке источника

Answer 1

.whatsapp-icon {
  background-size: contain;
  border-radius: 5px;
  margin-top: 10px;
  height: 35px;
  width: 35px;
  display: block;
  background-repeat:no-repeat;
    background-position: center;
  float: right;
  text-decoration: none;
}

<div class='theDownBar'>
  <a style="background-image: url('https://imageog.flaticon.com/icons/png/512/33/33447.png?size=1200x630f&pad=10,10,10,10&ext=png&bg=FFFFFFFF');"
     href='https://api.whatsapp.com/send?phone=phonenumber' class='whatsapp-icon'></a>
</div>

Я сделал это и его работу! возможно проверьте, что ваше изображение неверно!

Answer 2

Fixed

Когда я запускал его из другого браузера, он работал.

Я даже не осознавал, что проблема будет в следующем.

Я сделал чистый кеш для браузера, и он работал.

Спасибо всем, кто потратил немного своего времени, пытаясь помочь мне.

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

РЕДАКТИРОВАТЬ:

Еще раз спасибо за то, что проголосовали за мой ответ.

Answer 3

Бро, для меня твой код работает нормально, я просто изменил URL-адрес изображения, вот так:

<style>
.whatsapp-icon {
    background-size: contain;
    border-radius: 5px;
    margin-top: 10px;
    height: 35px;
    width: 35px;
    display: block;
    float: right;
    text-decoration: none;
}
</style>
<div class='theDownBar'><a style='background-image:url(https://lh5.googleusercontent.com/-GuUP5Jaz3Rg/AAAAAAAAAAI/AAAAAAAAAAc/HwaA1tNmtd0/photo.jpg);' href='https://api.whatsapp.com/send?phone=phonenumber' class='whatsapp-icon'></a></div>

Вы должны проверить это снова, но если это все еще не работало, тогда попробуйте этот код:

<div class='theDownBar'>
<a href='https://api.whatsapp.com/send?phone=phonenumber' class='whatsapp-icon'>
<img src='https://lh5.googleusercontent.com/-GuUP5Jaz3Rg/AAAAAAAAAAI/AAAAAAAAAAc/HwaA1tNmtd0/photo.jpg'/>
</a></div>

Не забудьте заменить URL изображения своим.