0

I am trying to change the background for my play.erb page but I'm struggling to get the image (that is held locally) to show. The page works when using a placeholder image provided online. The error message I am getting is this.

127.0.0.1 - - [06/Mar/2018:21:55:49 +0000] "GET /images/map.jpg HTTP/1.1" 404 515 0.0137

As I understand the 404 reflects the fact that the image can't be found.

I have looked at other SO responses and have tried moving the jpg into the same directory, adding and removing quotation marks and adding the 'public' and 'image' directories, all to no avail.

Can anyone see where I am going wrong? I have added the code and my directory structure below.

Thanks for your time.

#play.erb

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
body, html {
height: 100%;
margin: 0;
}

.bg {
/* The image used */
background-image: url("/public/images/map.jpg");

/* Full height */
height: 100%;

/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style> 

</head>
<body>
<div class="bg"></div>
</body>
</html>

File structure

Root Directory
lib (dir)

lib(dir)
my_app.rb, views(dir)

views (dir)
index.erb, play.erb, public(dir)

public(dir)
images(dir)

images(dir)
map.jpg

johnashu
  • 2,167
  • 4
  • 19
  • 44
Tom
  • 171
  • 1
  • 6
  • Did you try `background-image: url("public/images/map.jpg");`? – stevensonmt Mar 06 '18 at 22:38
  • No effect, same 404 error raised. – Tom Mar 06 '18 at 22:41
  • hmm, https://stackoverflow.com/a/28180988/7024293 suggests that path should be correct. – stevensonmt Mar 06 '18 at 23:17
  • 1
    Managed to get it working. I moved the public (dir) and its contents up to the root directory and adjusted the url to be ("/images/map.jpg"). Thanks for pointing me toward that SO article. As per the Sinatra README "Static files are served from the ./public directory." and "Note that the public directory name is not included in the URL." Not sure how I missed that. Thanks for your help. – Tom Mar 06 '18 at 23:34

2 Answers2

1

As per http://sinatrarb.com/intro.html there were two key issues with my file structure and code.

1.) Static files are served from the ./public directory.

I adjusted my file structure to this:

Root Directory
lib (dir), public(dir)

lib(dir)
my_app.rb, views(dir)

views(dir)
index.erb, play.erb, public(dir)

Public(dir) still holds the images(dir) and images(dir) still holds map.jpg.

2.) Note that the public directory name is not included in the URL.

I also adjusted the URL to this:

background-image: url("/images/map.jpg");

This solved the problem.

Tom
  • 171
  • 1
  • 6
0

EDIT: Sorry, I didn't see the Sinatra tag on you post... I will leave this only for information, but sorry there I can't help you...

Only for rails: The problem on your code is that asset-pipeline create a fingerprint after the file name to inform the browser when you update somenthing, you can't have access of folders inside the public folder (You can confirm trying to access the path on the browser: localhost/images/somenthing.*), only the root of it... You can use the AssetsHelper for do the job for you!

<style>
  ...
  .bg {
  /* The image used */
  background-image: url(<%= image_path('map.jpg');
  ...
</style>

If you try to do this on a *.css or *.scss file, rails will give you a error. The solution for this case is:

*.css - *.scss
.bg {
  /* The image used */
  background-image: url(asset_path('map.jpg'));

Hope this answers your question :)

VinyLimaZ
  • 11
  • 4