使用Webp进行图像和Rails资产管道

Question

我正在使用Modernizr来检测是否支持webp，然后决定显示webp图像还是jpg图像。 我的代码在开发中工作正常，但在生产中，硬编码路径无效，因为我需要某种方式来处理Rails资产管道图像名称更改。

我的html：

    <div class="col-sm-4">
      <a data-jpg1="assets/landing/screenshots/1.jpg" data-webp1="assets/landing/screenshots/1.webp" class="thumb preview-thumb image-popup" href="" id="landing_screenshot1_thumb" >
        <img data-jpg="assets/landing/screenshots/1.jpg" data-webp="assets/landing/screenshots/1.webp" id="landing_screenshot1" alt="Screenshot 1" class="thumb-img">
      </a>
    </div>

我的Javascript（成功确定浏览器是否支持webp并显示适当的类型）：

Modernizr.on('webp', function (result) {
  // `result == Modernizr.webp`
  var img  = document.getElementById('landing_screenshot1')
  var img2 = document.getElementById('landing_screenshot1_thumb')
  console.log(result);  // either `true` or `false`
  if (result) {
    // Has WebP support
    var a =1
    img.src   = img.getAttribute('data-webp')
    img2.href = img2.getAttribute('data-webp1')
  }
  else {
    // No WebP support
    var b=2
    img.src = img.getAttribute('data-jpg')
    img2.href = img2.getAttribute('data-jpg1')
  }
});    

这是我处理管道页面上其他图像的方式：

.bg-one {
  background-image: url(image-path('image1.jpg'));
}

但是我不知道要同时处理资产管道方法和webp / jpg方法。