URL-адрес контента не отображает изображение в браузере Firefox

Ответ 1

Свойство content работает с ::before и ::after.

googlePic::before
{
 content: url('../../img/googlePlusIcon.PNG');
}

Прочтите это: http://www.htmldog.com/reference/cssproperties/content/

IE8 поддерживает только свойство content, если задан параметр! DOCTYPE.

Ответ 2

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

Я просмотрел его, и как-то URL-адрес не является допустимым типом контента, и даже Chrome и Safari являются хорошими парнями и хорошо показывают его.

Что сработало для меня, было создание пустого "контента" и использование фона для показа изображения: он отлично работает в Chrome, Firefox, Safari и IE8 + 9

.googlePic:before {
    content: '';
    background: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float:right;
    height: 19px;
}

edit: забыли поставить: before после classname

Ответ 3

вам нужно написать два класса css в стиле

.googlePic
{  /*this for crome browser*/
    content: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float:right;
    height: 19px;

}

.googlePic: after
{  /*this for firefox browser*/
    content: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float:right;
    height: 19px;

}

и его работы для меня:)

Ответ 4

Лучший способ обработки изображений во всех веб-браузерах - использовать свойство background css с размером фона. Однако IE8 и более низкая версия не поддерживают его (представляют собой 2% зрителя в 2014 году)

.googlePic{
    background: url('../../img/googlePlusIcon.PNG') -6.5% 53px no-repeat;
    background-size: contain;
    float:right;
    height: 19px;
}

Ответ 5

Это спасло меня. Не забудьте удалить атрибут alt из img или вы найдете alt и фактическое изображение в Firefox.

   .googlePic, .googlePic:after{
        content: url('../../img/googlePlusIcon.PNG');
        margin-top: -6.5%;
        padding-right: 53px;
        float:right;
        height: 19px;
    }

Ответ 6

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

Я включил Bootstrap в свои проекты и использовал img-responsive класс. После этого я просто включаю изображение, используя тег <img class="img-responsive">. Он отображает и масштабирует красиво в каждом браузере и каждом размере видового экрана.

Надеюсь, это кому-то поможет.

Ответ 7

Я столкнулся с той же проблемой, в моем случае я не смог показать изображение с помощью содержимого: url(). Я хотел отобразить GIF ожидания в одном div. Я не знаю деталей поддержки Mozilla. Но это разрешается в моем случае следующим кодом.

background-img property with background-size: contain(compulsory)
.img_div{background-image: url("wait.gif");height: 20px;width: 20px;background-size: contain;border:none;}

Он работает на Chrome 73 и Firefox 66.

Ответ 8

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

Вот пример: http://jsfiddle.net/zBgHd/1/