background: url('img/edu2.jpg') center center no-repeat scroll;
This image is working fine in localhost. When I deploy it to Github and Heroku automatically deploys it. However, Heroku keeps showing me that it cannot GET this image, and server responded with a status of 404.
So what should I do?
In Google Chrome (similar in other browsers): Right-Click on the image, Inspect. Under the elements tab, you can see on the right frame (Styles) all the CSS styles. Scroll down to the background and check what image path it actually takes (absolute address). You can see the absolute address by hovering over the relative one (or right click, open in new tab). Then, check if this is correct (what it is obviously not).
The problem is, that img/edu2.jpg is relative to the path of the HTML file. If you add a / to the beginning, it will take the root of the website as its relative base.
This very well may be an issue of relative paths. The first step is to discover what URL your browser is trying to fetch the resource at by looking at the console in your browser's developer tools. It would be very helpful if you linked the website that's facing this error as well as the source code behind it so that it's possible for outsiders to debug it.
Related
I've uploaded some images on a java server where I save their path in my database and the actual images in the path "/src/main/resources/static/image-uploads/*.img".
When I'm trying to load at the same time the images they seem to appear as broken (that tiny image).
However if I restart my server they seem to be able to load.
When I inspect element I can see the correct path in the src tag of html (I even copied it by adding the C:/users/.../ prefix and I can see the image).
I've read some possible solutions like opening Google Chrome with disable extensions flag but none of them worked. I've also tried to change the path to an absolute path but the problem still persists.
Any suggestions?
I'm trying to deploy a site to Heroku using node.js, and I've run into a bit of an issue. When I run my site locally, it looks as I expected it to. However, once I deploy it to Heroku, it seems that it does not recognize the CSS file I have included, despite the fact that it is using the same exact files and file structure.
I have confirmed that my HTML and CSS code is syntactically correct, and that the CSS file is being pushed through Git. I made a commit by changing one thing in the CSS to make sure that it was being pushed (it did).
Here's how I access the CSS file:
<link rel="stylesheet" type="text/css" href="css/style.css">
Here is an image of how the website looks locally (left) and deployed on Heroku (right) using the same exact code (the black boxes are just from me obscuring some personal details).
Website Comparison
Does anyone know why Heroku refuses to use my CSS? I've been racking my brain for 2 days on this can can't figure it out.
I had the exact same problem, it happend I miss one character in my whole code. Let me explain
When I heroku opened my project no css loaded, but interestingly enough jquery was working fine and the css that jquery was getting from the css file was just fine. The css file was not the problem.
Then I found that the browser was blocking some
content.
If you tell the browser to read the blocked content anyways, it will show the page no problem, but it will show a https with a horrible red line crossing it, not an option. Then I checked what content the browser was blocking
(blocked content)
it was my bootstrap link.
So I was linking my bootstrap with http and not https.
I added that letter s and it is working fine now.
So I seem to be having a strange problem. When I open up my HTML pages locally, everything shows up and everything works. However, once I uploaded them to the server for my website only two of the images show up.
All of my images are in the same folder as all of my HTML pages and there are still a few images that work. Is this an issue with my image paths? Or is it something with my host since some of the images will load?
Here is the URL for my webpage: clepert.jomc-class.org
Must be a problem with images path since there a not on the server at the path that you wrote.
Maybe you didn't put them on the server or there has been a problem during the transfer. Check if they are on the server.
I got this for your background: Failed to load resource: the server responded with a status of 404 (Not Found). http://clepert.jomc-class.org/bckgrnd.jpg
So I would check for this file specifically on your server.
Otherwise your logo is a white image on a white background... so it won't show without a colored background.
The easiest way to solve such things is to check the browsers Developer-Tools and take a look at the console or network section (different from browser to browser).
You're getting an 404-Error so maybe the path is wrong, or the image is just not on your server.
Just because the browser gets a 404 back doesn't mean the file isn't there. It might be that the user / server doesn't have permission to access the file (not everyone uses the 401 status code).
Check the logs! They will save you LOTS of time.
Check the permissions of the directory and all other files you're
trying to access.
Make sure your paths are correct (local vs absolute, etc).
Post more details if that doesn't help.
Check the logs again.
Every other website I visit, the inspector works as expected:
But in many of the sites I'm editing within apache server (using xampp) somehow they doesn't show the "filename.css:lineNumber" data
Also, every change I try to do in the inspector in thse sites, doesn't do anything to the code shown in the source tab.
I've tried refreshing, hard refreshing with cache, closing and opening the tab, closing and opening chrome again. The same problem occurs.
In other sites the inspector works well, but not in many of the localhost sites.
Has someone experienced this before? Is there a way to fix this?
If you are using a client-side CSS generator library such as Lea Verou's excellent -prefix-free or client-side Less, you will not see source information as it has all been processed and reinjected as style elements.
Client-side Less has a property [dumpLineNumbers] to include source line info as a comment in the generated source. (I'm not sure if this will display in Chrome's inspector - but I think it might)
The only "fix" I know of for -prefix-free is to temporarily remove it, obtain the source info for reference, then put it back in.
I have had the exact same problem (not using a css generator), and it appears to be a known bug with the current version of Chrome, the solution is to use the more up to date Beta version known as Chrome Canary - Here's the link :)
https://www.google.co.uk/intl/en/chrome/browser/canary.html
Try to check what the format of your CSS file is. I had the same trouble with the UNIX and Macintosh formats. For example, try to open you CSS file in Notepad++ and in the bottom right corner of the window you'll see your current format. If you see UNIX or Macintosh there, click it with the right button of your mouse and change to DOS/Windows. Then save your file and refresh your page in Chrome. It definitely helped in my case.enter image description here
I have a really simple piece of CSS which is applying a background image to <li> elements
.icon-facebook { background: url("./images/icon_facebook.png") no-repeat; }
This works fine when I view it locally, without a web server, i.e. by double-clicking the .html file.
But as soon as I serve the same page via Apache - whether on localhost or a production server - the background images disappear.
Other background images on the page work fine - and all have identical (relative) paths.
Specifying an absolute path to the background-images does not work either.
Renaming the files did not work.
The images can be displayed just fine if navigated to directly in the browser.
Monitoring Apache's access log, the browser doesn't even attempt to request the images (!), even if an absolute URL is supplied in the CSS.
When I inspect the <li> Firebug says "could not load the given URL" but when I copy and paste the background-image URL straight from the CSS in Firebug into a new tab - guess what? It works.
I have a <div> on the same page with a different background image from the same folder which works just fine. When I replace its filename with one of my "problem" files I notice it isn't displayed any more.
The images in question are 20x20px PNGs (but I tried JPGs too).
All other browsers work fine.
This is truly driving me crazy.
Unbelievable. Truly unbelievable.
The culprit was Adblock Plus, which I had installed on Firefox but not any other browser. It was interpreting the names and/or class names of the background images as being either advertisements or social media annoyances, and therefore silently blocking them.
I had previously added my production domain to its white list, but when it changed I forgot to update it.
That explains why some image filenames worked (e.g. icon_f.png whereas others - icon_fb.png or icon_facebook.png - did not).
Let this be a lesson - do not run any kind of addons on your development browser.
I was ready to cry... and think I will now. Cry for my stupidity.
Thank you to all for your input.
Specifically, the culprit is Fanboy's Social Blocking List, which is one of the filter subscriptions included in Adblock Plus. It has already caused me a lot of distress in the past.
To disable it, click on the Adblock Plus toolbar button and choose Open filter preferences. You'll then find the list of subscriptions and you can simply unsubscribe to that one.
It's better than disabling Adblock Plus completely so you can continue using it for what it was originally intended: blocking ads.