将图像 url 从变量传递到 css

Question

我正在从我的数据库中调用产品图片 url，在前端页面中，我有一些 css 可以为页面上的图片设置样式。但是，我需要将产品图片的 url 传递到指定图片的 url 的 css 中...

我的css:

  .product-image .bg{
  background-image: url('https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8dHNoaXJ0fGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60  ');
  background-size: cover;
  background-position: center top;
  width: 100%;
  min-height: 450px;
}

显示背景图片的产品页面

<div class="product group">
<div class="col-1-2 product-image">

产品图片放在 div 中，它呈现产品图片。如何将此 url <%= data[I].IMAGE_URL %> 传递到 css？所以不用 ->

background-image: url('https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8dHNoaXJ0fGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60'); ->

我会 background-image: url('<%= data[I].IMAGE_URL');

这可能吗？

Answer 1

这是可以做到的。只要将它放在 .aspx 或服务器上呈现的任何其他页面上，页面就可以了。只需将其更改为使用双引号而不是单引号即可。

product-image .bg {
    background-image: url("<%=someImageURL%>");
    background-size: cover;
    background-position: center top;
    width: 100%;
    min-height: 450px;
}

将图像 url 从变量传递到 css

pass image url from variable into css

html

css

ejs

node.js