动态更新rails image_path

Question

I am using the rails js helper image_path to update an images source using javascript.

The actual string for the new img src path lives inside of a variable and I need to inject that into the image_path string below, which has been giving me problems.

Here is what I'm working with:

Object:

var bike = { image: "bikes/diamondback/diamondback-29-ht.png"}

Image path:

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

I've been trying to do something like this to inject the url into the image path:

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

also tried the non es6 way

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

I think the problem is the intermingling of the rails and js code.

Does anyone know of a good way to solve this using rails and javascript?

Answer 1

Is there a reason you need the ruby code in the JS? That probably won't work. But if you must pull data from the dom to render data via js, why not use the ruby code in the view in say a data attribute and use that in the javascript.

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

Answer 2

Unfortunately I wasn't able to get the string injection to work, but here's how I got to a working solution (that still doesn't answer this question):

I included the full image path url in the object variable. The file this lives in must be .js.erb

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

Then I'm able to just call bikes.diamondbackOverdrive29.image

So I'm going to have to declare the full image path for each item, but it seems okay for now, and pretty clean still.