为什么设置元素背景图片 url 的 jquery.css() 函数不起作用？

Question

我一直在尝试通过jquery.css()函数将背景图像应用到div，例如：

$('#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');

Answer 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;
}

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


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