时间戳

首页 > 解决方案 > 将图像 url 从变量传递到 css

html - 将图像 url 从变量传递到 css

问题描述

我正在从我的数据库中调用产品图片 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">

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');

这可能吗？

标签： htmlcssnode.jsejs

解决方案

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

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

推荐阅读