css 内联样式 - style="background-image:url 用于本地图像

编程问答 2022-05-04

问题描述

我会通过内联样式加载图片 Hormiga.jpg 作为幻灯片的背景，但未正确应用属性 url。

这是正确加载图像的原始代码：

<div class="parallax-bg" style="background-image:url(./images/nature-1.jpg)" data-swiper- 
      parallax="-23%"></div>

上面的代码不是我的代码。我有以下路径：

  • myapp/templates/myapp/index.html
  • myapp/static/images/Hormiga.jpg

从 index.html 中，图像被正确调用，如下所示，但对于 css 内联样式不起作用...：

"{% static 'images/Hormiga.jpg' %}"

以下方法无效

style="background-image:url"({% static 'images/Hormiga.jpg' %})""
style="background-image:url("{% static 'images/Hormiga.jpg' %}")"
style="background-image:url"(../images/Hormiga.jpg)""
style="background-image:url(images/Hormiga.jpg)"
style="background-image:url(../myapp/static/images/Hormiga.jpg)"

任何帮助将不胜感激。 根是static/images/Hormiga.jpg

谢谢

解决方法

您好，我检查了您的问题，您的代码很好， 但是您还必须定义宽度和高度才能使其可见

<div class="parallax-bg" style="background-image:url(./images/nature-1.jpg); width: 100px; height: 100px;" data-swiper- 
      parallax="-23%"></div>

,

我不确定您使用的这条静态线是什么，并且您在不需要它们的地方有引号

如果图片文件夹在同一个目录下使用这个

style="background-image:url('./images/Hormiga.jpg')"

或者如果它在上面的目录中。

style="background-image:url('../images/Hormiga.jpg')"
frontendhtmlinline-styleswebweb