CODEWITHSUNDEEP
htmlcssruby-on-railsmodel-view-controllerasset-pipeline
seymore_strongboy
seymore_strongboy

Reputation: 964

Rails 4 public 404/500 error pages are requesting image resources with bad paths

I've built some error pages (404, 500, etc) into the public folder of my app. I know these are outside of the asset pipeline, so I built each as a stand alone html file, with CSS in the head.

These error pages have a couple images (a background and a logo). Both are loaded the usual way (not using any rails helpers):

<img src="Checklick-Logo-White-Transparent.png" alt="Checklick Logo" style="width: 100%">

background: url("Checklick-Cloud-Background-High.jpg") no-repeat center top;

On production, when I try to load these pages (app.checklick.com/500.html), they load just fine.

However, when I get an actual error on the app, and those same error pages are loaded, for some reason, the image paths get a controller name appdended to them (ie they become app.checklick.com/programs/Checklick-Logo-White-Transparent.png). The controller then tries to perform an action using that image filename as an argument, which causes yet another error. And of course, the browser can't render either images, so the error pages themselves look broken.

Any idea how/why the controller name would be added to the image request during an actual error?

Upvotes: 2

Views: 2526

Answers (2)

seymore_strongboy
seymore_strongboy

Reputation: 964

As it turns out, all that was wrong was that I wasn't using a root-relative path to the images on my public 404/500 html pages.

I changed

<img src="Checklick-Logo-White-Transparent.png" alt="Checklick Logo" style="width: 100%">

to

<img src="/Checklick-Logo-White-Transparent.png" alt="Checklick Logo" style="width: 100%">

and changed

background: url("Checklick-Cloud-Background-High.jpg") no-repeat center top;

to

background: url("/Checklick-Cloud-Background-High.jpg") no-repeat center top;

Now, no matter what the source of my error pages, the images load OK. For example, I can load app.checklick.com/500 or app.checklick.com/programs/500 and still load the images OK.

Upvotes: 4

Vishnu Atrai
Vishnu Atrai

Reputation: 2368

Images should be in app/assets/images directory.

in public page you can write path like - 

<img src="/assets/Checklick-Logo-White-Transparent.png" alt="Checklick Logo" style="width: 100%">

Upvotes: 2

Related Questions