CODEWITHSUNDEEP
ruby-on-railslazy-loadinghaml
Lauraponi
Lauraponi

Reputation: 319

Using data attribute with rails image_tag and haml

I am trying to use Echo.js lazyloader.

To do so, I need to use a data attribute which will contain the path to my image to lazy load, such as: 

<img src="/assets/images/placeholder.png" alt="" data-echo="/assets/images/myImage.jpg">

I am using rails and haml. According to several answers here, I should translate the plain html by: (but they don't specify what happens when the data links to an image path)

= image_tag("placeholder.png", :data => { "echo" => "/assets/images/myImage.jpg"})

OR

= image_tag("placeholder.png", "data-echo" => "/assets/images/myImage.jpg")

The placeholder.png image is displayed but myImage is never loaded.

When using the inspector, it doesn't seem that the myImage path is recognised as a path to an image.

Any ideas? Alternatively if you could suggest a lazy loader that doesn't rely on data- attributes and works with rails and haml, this would be great. Thanks

Upvotes: 0

Views: 1683

Answers (1)

Eyeslandic
Eyeslandic

Reputation: 14900

You need to use the rails assets helper on your placeholder too

= image_tag("placeholder.png", data: { "echo" => image_path("myImage.jpg") })

Upvotes: 3

Related Questions