如何在Pug(Jade)中设置背景图像的动态路径

亚力山大

我在Pug中有一些对象,并希望通过以下方法呈现列表:

var categoryList = [
                            {
                                img: '/src/img/images/category1.jpg',
                                name: 'Консервация'
                            },
                            {
                                img: '/src/img/images/category2.jpg',
                                name: 'Мороженое и десерты'
                            },
                            {
                                img: '/src/img/images/category3.jpg',
                                name: 'Кондитерские ингредиенты'
                            },

我想为每个元素设置背景图像,但是找不到正确的语法。我该怎么做?

  each category in categoryList
      a.category-item(href='catalog.html')
      My try // .category-item_img(style='background-image : url(category[x].img);')
肖恩

正确的语法应为以下任意一种:

// with string concatenation
each category in categoryList
  a.category-item(href='catalog.html')
    .category-item_img(style='background-image: url(' + category.img + ')')

// with template literals
each category in categoryList
  a.category-item(href='catalog.html')
    .category-item_img(style=`background-image: url(${category.img})`)

有关更多信息,请参见Pug文档的“属性插值”部分

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在加载时动态设置表单的背景图像?

来自分类Dev

如何在Android中使用解析器动态设置线性布局中的背景图像

来自分类Dev

如何在Java Swing中设置按钮的背景图像

来自分类Dev

如何在Java Applet中设置背景图像?

来自分类Dev

如何在NetBeans中为JPanel设置背景图像?

来自分类Dev

如何在Codeigniter 3中设置背景图像

来自分类Dev

如何在MasterDetailPage菜单中设置背景图像

来自分类Dev

如何在LibreOffice Writer 5中设置背景图像?

来自分类Dev

如何在Android中的形状的右侧设置背景图像

来自分类Dev

如何在可可 NSView 中设置背景图像

来自分类Dev

如何在html中设置高度和背景图像

来自分类Dev

如何在 CSS 中为背景图像设置动画?

来自分类Dev

不确定如何在 Tkinter 中设置背景图像

来自分类Dev

如何在角度 6 中设置背景图像?

来自分类Dev

如何在Jade中仅将背景图像添加到一页

来自分类Dev

如何在Jade中仅将背景图像添加到一页

来自分类Dev

如何在背景图片中设置动态路径:url()

来自分类Dev

如何从文件路径为Android中的布局设置背景图像

来自分类Dev

Rails4-如何动态设置div的背景图像?

来自分类Dev

为QlineEdit设置背景图像时,如何在QLineEdit中设置文本颜色

来自分类Dev

如何在Knockout.js绑定中添加动态添加背景图像?

来自分类Dev

如何在Knockout.js绑定中添加动态添加背景图像?

来自分类Dev

在动态元素上设置背景图像

来自分类Dev

如何在JPanel中将背景图像设置为JTextArea

来自分类Dev

如何在Hyperterm中设置自定义背景图像

来自分类Dev

如何在Fabric JS中设置画布的重复背景图像?

来自分类Dev

如何在ios7的uitableview单元格中设置背景图像?

来自分类Dev

如何在WPF应用程序中设置所有窗口的背景图像

来自分类Dev

如何在ASP.NET MVC4中设置背景图像

Related 相关文章

  1. 1

    如何在加载时动态设置表单的背景图像?

  2. 2

    如何在Android中使用解析器动态设置线性布局中的背景图像

  3. 3

    如何在Java Swing中设置按钮的背景图像

  4. 4

    如何在Java Applet中设置背景图像?

  5. 5

    如何在NetBeans中为JPanel设置背景图像?

  6. 6

    如何在Codeigniter 3中设置背景图像

  7. 7

    如何在MasterDetailPage菜单中设置背景图像

  8. 8

    如何在LibreOffice Writer 5中设置背景图像?

  9. 9

    如何在Android中的形状的右侧设置背景图像

  10. 10

    如何在可可 NSView 中设置背景图像

  11. 11

    如何在html中设置高度和背景图像

  12. 12

    如何在 CSS 中为背景图像设置动画?

  13. 13

    不确定如何在 Tkinter 中设置背景图像

  14. 14

    如何在角度 6 中设置背景图像?

  15. 15

    如何在Jade中仅将背景图像添加到一页

  16. 16

    如何在Jade中仅将背景图像添加到一页

  17. 17

    如何在背景图片中设置动态路径:url()

  18. 18

    如何从文件路径为Android中的布局设置背景图像

  19. 19

    Rails4-如何动态设置div的背景图像?

  20. 20

    为QlineEdit设置背景图像时,如何在QLineEdit中设置文本颜色

  21. 21

    如何在Knockout.js绑定中添加动态添加背景图像?

  22. 22

    如何在Knockout.js绑定中添加动态添加背景图像?

  23. 23

    在动态元素上设置背景图像

  24. 24

    如何在JPanel中将背景图像设置为JTextArea

  25. 25

    如何在Hyperterm中设置自定义背景图像

  26. 26

    如何在Fabric JS中设置画布的重复背景图像?

  27. 27

    如何在ios7的uitableview单元格中设置背景图像?

  28. 28

    如何在WPF应用程序中设置所有窗口的背景图像

  29. 29

    如何在ASP.NET MVC4中设置背景图像

热门标签

归档