Lightbox2 navigation images missing when using importmap

Question

In a rails 7.1 project I'm using importmap to load lightbox2

importmap.rb
pin "lightbox2", to: "https://ga.jspm.io/npm:[email protected]/dist/js/lightbox.js"

This works but none of the navigation images are being loaded. Such as the X < > overlayed onto the image when enlarged. The html is referencing them as lightbox2/close.png - I've cloned the lightbox2 gem and manually copied the images into the app/assets/images/lightbox2 directory but this doesn't feel like the correct solution as it doesn't work - the url needs assets prefixing to it.

How should I include the Lightbox2 navigation images in a rails 7.1 project?

Answer 1

Putting this here for any other poor soul that has this issue:

I had to download the css (.scss) from the Lightbox url and add it into the app/stylesheets/vendors directory. Before it can work though the image names within it need to have a prefix of assets/ adding and the image_path command removing.

So

background: url(image_path('lightbox2/close.png')) top right no-repeat;

becomes

background: url('assets/lightbox2/close.png') top right no-repeat;

Once done rebuild the application css file and the images appeared.