404 image is not showing

Question

I have an image: app/assets/images/oops.jpg

In 404.html I have:

<html>

<head>

  <title>Oops! Where are we?</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
  body {
  background: url('oops.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  </style>
</head>

<body>


</body>
</html>

I confirmed that the image is indeed in production on Heroku, but the browser can not find the image.

Here is an image of my files.

What am I missing here?

background: url('../images/oops.jpg') no-repeat center center fixed; — Learn AspNet, Oct 04 '16 at 21:03
As long as I know, I maybe be wrong, if you use 'cover' you should use background-image i.p.o. background — Franco, Oct 04 '16 at 21:06
@Franco I have tried using background-image, but it is still not working. What is the suggestion for the full line and I can try — gwalshington, Oct 04 '16 at 21:07
You need first to be sure that your image path is correct. Can you tell me where your image is? — Franco, Oct 04 '16 at 21:10
@Franco the image path, from the very highest level, is: app/assets/images/oops.jpg its a rails app — gwalshington, Oct 04 '16 at 21:14
If this code is in the app directory you would try 'assets/images/oops.jpg'. — Franco, Oct 04 '16 at 21:22

score 1 · Answer 1 · edited Oct 05 '16 at 09:34

1

Try image path as "/assets/oops.jpg" or "../images/oops.jpg" this one too in another case . Assuming that you are using ruby on rails app from your path that you have mentioned. hope this will work for you.

edited Oct 05 '16 at 09:34

Jai Chauhan

4,035
3
36
62

answered Oct 04 '16 at 21:07

jacksonR

25
4

score 1 · Answer 2 · answered Oct 04 '16 at 21:07

1

If your image is app/assets/images/oops.jpg

then your path to the image needs to be:

body {
  background: url('/app/assets/images/oops.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
  }

answered Oct 04 '16 at 21:07

Wim Mertens

1,780
3
20
31

This returns a 440 not found – gwalshington Oct 04 '16 at 21:13
1

can you test in the browser with the full url to see if the image is loading: http://www.example.com/app/assets/images/oops.jpg – Wim Mertens Oct 04 '16 at 21:14
Or place the image in the root, and change the path to the image to url(/oops.jpg) – Wim Mertens Oct 04 '16 at 21:15
Interesting, it does not appear when I go to the equivalent of example.com/app/assets/images/oops.jpg. But I clearly see it in my repo. Thoughts on why this is? – gwalshington Oct 04 '16 at 21:17
1

did you upload your image to the server? Also, you might want to give the body a width and a height of 100% as well because it doesn't have any content – Wim Mertens Oct 04 '16 at 21:18
Yes, rails automatically complies assets, and I see it compiling the image when I push. I will try adding a width and height and see if it helps, but there is an error in my browser's console saying 404 not found for the image – gwalshington Oct 04 '16 at 21:20
If the image returns a 404 when you check in the browser, then there might be an issue with the compiling rather than the css path. Try uploading the image manually to the server. – Wim Mertens Oct 04 '16 at 21:23
And you're sure the name of the image (and extension) is correct? – Wim Mertens Oct 04 '16 at 21:27
I added a screenshot – gwalshington Oct 04 '16 at 21:32
Is app a folder on the server as well, or is assets in the root? If so then try this path: /assets/images/oops.jpg Make sure to test in the browser first to see if the image shows up – Wim Mertens Oct 04 '16 at 21:34
1

Here's a post that's related, maybe this is the issue: http://stackoverflow.com/questions/15354539/heroku-does-not-compile-files-under-assets-pipelines-in-rails-4 – Wim Mertens Oct 04 '16 at 21:37
Thanks! I saw that post previous to posting this. I have those gems set up. Also, I have several other images throughout the app, which work fine. I'm wondering if this is different since the rails 404.html page is in /public, instead of in views? – gwalshington Oct 04 '16 at 21:48
I'm not too familiar with Ruby, maybe best to add Ruby tags to your question rather than css. My best bet however would be to place the image in the root and change the css path to the image to url(/oops.jpg) – Wim Mertens Oct 04 '16 at 21:52
okay, I'll keep working on that, and add ruby to the question. Thank you so much for your help! – gwalshington Oct 04 '16 at 21:55

score 1 · Answer 3 · edited Oct 04 '16 at 22:21

1

background: url('../images/oops.jpg') no-repeat center center fixed;

edited Oct 04 '16 at 22:21

the Tin Man

158,662
42
215
303

answered Oct 04 '16 at 21:08

Learn AspNet

1,192
3
34
74

I tried this and still got a 404 not found in browser console – gwalshington Oct 04 '16 at 21:09
background: url('/app/assets/images/oops.jpg') no-repeat center center fixed; Try this – Learn AspNet Oct 04 '16 at 21:10
When answering you should explain why your solution is useful and how it works. Tossing out code doesn't educate, which is the goal. It's akin to handing someone a fish or teaching them to fish. – the Tin Man Oct 04 '16 at 22:22

score 1 · Answer 4 · answered Aug 13 '21 at 23:14

I was also facing this issue while deploying a rails app on heroku in my case a little css change solved the problem

  body {
  background: asset-url('oops.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

use this asset-url instead of url property. hopefully it will solve your problem

score 0 · Answer 5 · answered Aug 31 '17 at 11:16

0

instead ... use this

body {
background: url('../images/oops.jpg');  

background-repeat: no-repeat;

background-size: 100% 100% ;
}

answered Aug 31 '17 at 11:16

Zuma

13
5

1

Welcome to Stack Overflow! Thank you for this code snippet, which may provide some immediate help. A proper explanation [would greatly improve](//meta.stackexchange.com/q/114762) its educational value by showing *why* this is a good solution to the problem, and would make it more useful to future readers with similar, but not identical, questions. Please [edit] your answer to add explanation, and give an indication of what limitations and assumptions apply. – Toby Speight Aug 31 '17 at 12:23

404 image is not showing

5 Answers5