Question

我正在使用rails js helper image_path来使用javascript更新图像源。

新的img src路径的实际字符串存在于变量内部，我需要将其注入下面的image_path字符串，这一直给我带来了问题。

以下是我与之合作的内容：

对象：

var bike = {image：＆＃34; bikes / diamondback / diamondback-29-ht.png＆＃34;}

图片路径：

$('.ga-recommended-bike').attr('src', "<%= image_path 'bikes/diamondback/diamondback-29-ht.png' %>")

我一直在尝试做这样的事情，将网址注入图片路径：

$('.ga-recommended-bike').attr('src', "<%= image_path `${bike.image}` %>")

也试过非es6方式

$('.ga-recommended-bike').attr('src', "<%= image_path " + bike.image + " %>")

我认为问题在于rails和js代码的混合。

有没有人知道使用rails和javascript解决这个问题的好方法？

Answer 1

您是否有理由需要JS中的ruby代码？那可能行不通。但是如果你必须从dom中提取数据以通过js渲染数据，那么为什么不在视图中使用ruby代码来表示数据属性并在javascript中使用它。

<div id="my-data-thing", data-image-path="<%= image_path 'bikes/diamondback/diamondback-29-ht.png' %> ></div>

Answer 2

不幸的是我无法让字符串注入工作，但这是我如何找到一个有效的解决方案（仍然没有回答这个问题）：

我在对象变量中包含了完整的图像路径url。它所在的文件必须是.js.erb

  var bikes = {
    diamondbackOverdrive29: {
      image: "<%= image_path 'bikes/diamondback/diamondback-29-ht.png' %>",
      price: "",
      make: "",
      model: "",
      features: []
    }
  }

然后我就可以打电话给bikes.diamondbackOverdrive29.image

所以我必须为每个项目声明完整的图像路径，但现在看起来还可以，而且还很干净。

动态更新rails image_path

2 个答案: