Почему функция jquery.css() для установки URL-адреса фонового изображения элемента не работает?

Я пытался применить фоновое изображение к div с помощью функции jquery.css(), например:

$('#div').css('backgrounds-image','./assets/imgs/flag.png');

Ожидалось: увидеть изображение, отображаемое в div., но это не сработало.

HTML:

<div class = "img-viewer"></div>

CSS:

div.img-viewer {
  min-width: 200px;
  min-height: 200px;
  background-image: none;
  background-repeat: no-repeat;
}

JQuery:

$('div.img-viewer').css('background-image','./assets/imgs/flag.png');

не получилось" как? Что он сделал вместо этого? А вы использовали backgrounds-image или background-image? Только последнее верно

— 27.05.2024 03:24

Возможно, путь к изображению неверен. Используйте панели инструментов разработчика вашего браузера «Консоль» и «Сеть», чтобы проверить URL-адрес, который он пытается использовать, и посмотреть, каков будет ответ.

— 27.05.2024 03:27

Я использовал фоновое изображение, а также проверил пути: путь загружается правильно, если я использую его с img.src. Я просто не знаю, почему он не отображается, а также, если я добавлю тот же URL-адрес в файл CSS, он будет работать нормально.

— 27.05.2024 03:33

Что вы видите в инструментах разработчика вашего браузера? Какой CSS применяется, а какой нет?

— 27.05.2024 05:34

О, я понял, что не поместил строку URL-адреса в функцию css url() в качестве значения фонового изображения. Всем спасибо, теперь работает хорошо.

— 27.05.2024 15:46

javascript jquery css

27.05.2024 03:16

Поведение ключевого слова "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

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

Согласно документации: фоновое изображение

В вашем коде отсутствует url(). [проблема с использованием синтаксиса]

Вот рабочий пример:

$('div.img-viewer').css('background-image', 'https://www.shutterstock.com/image-photo/half-alive-dead-tree-260nw-1718611903.jpg');
$('div.img-viewer-second').css('background-image', 'url(https://www.shutterstock.com/image-photo/half-alive-dead-tree-260nw-1718611903.jpg)');

div.img-viewer,
div.img-viewer-second {
  min-width: 200px;
  min-height: 200px;
  background-image: none;
  background-repeat: no-repeat;
}

div.img-viewer p {
  color: red;
}

div.img-viewer-second p {
  color: white;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>


<div class = "img-viewer">
  <p>First one without background image due to CSS syntax violation</p>
</div>
<br>
<div class = "img-viewer-second">
  <p>Second one with background image due to correct CSS syntax usage</p>
</div>

27.05.2024 07:38

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

Зачем менять первую букву свойства на строчную при обновлении проекта до .NET 8?

Как получить объект события из щелчка другого элемента события?

Модальный jquery и автозаполнение не работают с кнопкой обратной передачи

Отображение общей цены и размеров продукта в зависимости от количества и категории продукта в WooCommerce

Очень уникальная проблема клонирования — несколько действий клонирования на одной странице, но с разными идентификаторами

Индивидуальный макет карусели совы

Автоматическое обновление корзины WooCommerce при изменении количества товаров в корзине

Динамическое отображение определенного варианта оплаты на основе адреса электронной почты или телефона для выставления счета при оформлении заказа Woocommerce

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

Пусть наложение div станет видимым через переход/анимацию круга клип-пути

Почему функция jquery.css() для установки URL-адреса фонового изображения элемента не работает?

Ответы 1

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

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