【问题标题】:css inline style - style="background-image:url for local imagecss inline style - style="background-image:url for local image
【发布时间】:2021-04-28 18:41:54
【问题描述】:

我会通过内联样式加载图像 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

谢谢

【问题讨论】:

    标签: html css web frontend inline-styles


    【解决方案1】:

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

    如果图像文件夹在同一目录中,请使用此选项

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

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

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

    【讨论】:

    • 这行得通,style="background-image:url('../static/images/Hormiga.jpg')" 谢谢先生,感谢。尽快我可以分配选票,我会记得给你一个:)
    • @VincenzoDelre 请记住将问题标记为已回答
    【解决方案2】:

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

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

    【讨论】:

    • 嗨,这不是我的代码。我有以下路径:myapp/templates/myapp/index.html 和 myapp/static/images/Hormiga.jpg
    • 嗨,如果你愿意现在看一下这个问题……我几秒钟前已经编辑过了。谢谢
    猜你喜欢
    • 2021-09-01
    • 2021-01-02
    • 1970-01-01
    • 1970-01-01
    • 2022-12-19
    • 1970-01-01
    • 1970-01-01
    • 2014-05-29
    • 2019-04-30
    相关资源
    最近更新 更多