In Ruby on Rails, I researched how to specify paths for loading images within JavaScript and CSS files, so here’s a memo.

By the way, the path to image files is as follows:

$ tree
.
├── app
│   ├── assets
│   │   ├── images
│   │   │   └── thickbox
│   │   │       ├── loadingAnimation.gif
│   │   │       └── macFFBgHack.png

When the image file is located at: app/assets/images/thickbox/loadingAnimation.gif

The path should be specified as:

/assets/thickbox/loadingAnimation.gif

not

/assets/images/thickbox/loadingAnimation.gif

(without “images”)

I’ve written examples of changes referring to locations where image files are specified within the JavaScript and CSS files of the jQuery library ThickBox.

・Reference: [jQuery] Usage and Reference Articles for “ThickBox” - Easy Dialog Display | CodeNote.net

■ thickbox-compressed.js

・Before change

var tb_pathToImage = "images/loadingAnimation.gif";

↓

・After change

var tb_pathToImage = "/assets/thickbox/loadingAnimation.gif";

■ thickbox.css

・Before change

.TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}

↓

・After change

.TB_overlayMacFFBGHack {background: url(/assets/thickbox/macFFBgHack.png) repeat;}

That’s all from the Gemba.

【Reference】

・Rails 3.1 and Image Assets - Stack Overflow