Question

我有一个mongodb数据库，其文档的img值设置如下：

＆＃34; img＆＃34;：＆＃34; ../ folder / img.jpg＆＃34;

是否可以在我的CSS中使用此字符串来更改背景图像？我需要这样做，因为图像应该随着json文档中的其他值而改变。

Answer 1

假设您在从mongodb检索图像字符串时知道如何在html中应用背景图像：

如果无法动态构建css，可以在构建html页面时将其应用于html元素：

<!-- Element which needs a dynamic background image, for example a div -->
<div style="background-image: url('../folder/img.jpg');">
<div>

如果您可以动态构建css文件或样式标记，则可以执行此操作

<强> CSS

#myelement{
   background-image: url('../folder/img.jpg');
}

<强> HTML

<div id="myelement">
</div>

Answer 2

创建一个为动态css提供服务的路线：

example.com/myuser/mycss/1

然后根据来自mongodb的数据创建一个返回css的逻辑：

function mycss(req, res) {
    MyImgs..find({
       where: {
         _id: req.params.id
       }
    }).then(function(singleDoc){
          var cssContent = ' #myimg {background-image: url('+singleDoc.img+'); }';

          res.contentType('text/css');
          return res.end(cssContent);
    });
}

请注意这是使用nodejs / express的控制器操作示例。

在您的头标记上，您可以添加以下内容：

<head>
   <link type="text/css" src="example.com/myuser/mycss/1" />
</head>

将带有图像路径值的Json文档插入到css背景属性中

2 个答案: