如何将HTML中的图片URL传入CSS变量适配Rails卡片样式？

方案一：通过HTML data属性传递图片URL（无JS） #

1. 修改Rails ERB模板 #

在你的_profile-quest_cards.html.erb中，给每个卡片元素添加data-*属性，注入Rails生成的图片URL：

<div class="card"
     data-front-img="<%= asset_path('your-front-image.png') %>"
     data-back-img="<%= asset_path('your-back-image.png') %>">
  <!-- 卡片内部结构保持CodePen原有内容 -->
</div>

2. 调整SCSS代码 #

把原CodePen中硬编码的图片变量，替换为从data属性读取的自定义属性：

.card {
  /* 替换原有的--charizardfront等硬编码变量 */
  --front-image: url(attr(data-front-img));
  --back-image: url(attr(data-back-img));
}

/* 原CodePen中引用图片变量的地方，替换为新变量 */
.card__face--front {
  background-image: var(--front-image);
  /* 其他样式保留 */
}

.card__face--back {
  background-image: var(--back-image);
  /* 其他样式保留 */
}

方案二：直接在HTML中注入CSS变量（改动最小，推荐） #

这个方案不需要修改SCSS的变量声明，直接在ERB中给卡片元素的style属性注入对应变量：

<div class="card"
     style="--charizardfront: url('<%= asset_path('your-front-image.png') %>'); --charizardback: url('<%= asset_path('your-back-image.png') %>');">
  <!-- 卡片内部结构不变 -->
</div>

原CodePen的SCSS代码可以完全保留，因为变量名和引用方式都没变，只是变量值从CSS内部移到了HTML的内联样式中，Rails生成的URL会被正确注入。

方案三：JS辅助方案（可选） #

如果需要批量处理卡片，可使用简单JS读取HTML中的图片元素并设置CSS变量：

1. ERB模板中添加隐藏图片标记 #

<div class="card">
  <img class="card-img-front" src="<%= asset_path('your-front-image.png') %>" hidden>
  <img class="card-img-back" src="<%= asset_path('your-back-image.png') %>" hidden>
  <!-- 卡片原有结构 -->
</div>

2. 添加JS代码 #

document.querySelectorAll('.card').forEach(card => {
  const frontSrc = card.querySelector('.card-img-front').src;
  const backSrc = card.querySelector('.card-img-back').src;
  card.style.setProperty('--charizardfront', `url(${frontSrc})`);
  card.style.setProperty('--charizardback', `url(${backSrc})`);
});

此方案适合需要动态生成大量卡片的场景，但优先推荐前两个无JS方案。

内容的提问来源于stack exchange，提问作者PierceF