I made a parallax website but it doesn't load any images everything else from css does load except the images . Nothing worked so far . Don't know if there is problem in the code or in the server .
html and css codes
404 error
files
Site is loaded but photos arent
problem you have here is that images aren't getting the right path.
I should understand the current file structure to give you a proper answer:
Let's say you have:
index.html
images/main.png
styles/style.css
If this is the case. You are calling the image from the root, because index.html is located there.
So you can try calling the image like this:
.pimg1{background-image: url('/images/main.png');}
If this doesn't work, you can do the following:
.pimg1{background-image: url('./images/main.png');}
The ./ will always go to the root and then it will look for the directory images/ This will help you with sites that has subfolders urls.
Hope it helps!
Related
enter image description herefirst time posting here. I restructured all the files on my website since I wanted to experiment with how to organize files, and I ran into a few issues. When I launch the site HTML appears but the CSS stylesheet doesn't seem to want to attach. I also think the js sheet is also not attaching properly but can't test it till css shows up. I double-checked spelling as well as placed the index.html on the root folder but still nothing I'll post the code below and hopefully someone can help me out. I appreciate you guys.
When you link a CSS or JS file to an HTML file, you need to provide a relative path from the HTML file to the CSS or JS file. In this case, it looks like index.html is already in the Root directory, so you shouldn't include that in the CSS file paths. The relative path to the css files (the path from the directory where index.html is to where the css file is) would be /Css/index.css, and the same for your javascript files (/Scripts/index.js).
I am trying to load an image locally onto my html. I first tried serving an image path through a /images/ folder, but that did not work. I then tried serving images with the whole path to the image like <img src="/Users/code/src/code/go/src/websites/website/website-Bucket.png" alt="test"> but I still had no luck. I checked my html and it has no errors. I have restarted my PC, changed the image to .jpg, and it still did not want to work. I get an error in Safari - An error occurred while trying to load the resource and the image shows as a blue box and question mark. What things would you try to troubleshoot?
Extra - I am using goLang to serve the files. I have it so a http.handleFunc() goes off and serves the images folder when it is requested. The path is showing http://localhost/images/theImage.png "the correct path" but nothing happens. So, I save the image and it shows it as a html and shows a section of the page?? Would that be a path thing?
In first instance you have to understand the path source, when you are on a HTML file, your path inside the file should be :
<img src="images/website-Bucket.png" alt="test">
that's because :
the path of your .html file can access trough files the inside path with the "/folder/file" structure route in the html file, so your structure files should be:
yourfiel.html (your file render on browser) /imagesfolder
-website-Bucket.png" (you call it on your html as
/imagesfolder/website/Bucket.png)./
you can learn more about paths here :
http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
Looks like it may be a file path issue.
Take a look at this page it has a good example.
https://www.w3schools.com/html/html_filepaths.asp
Also try renaming the image with a _ and not use the -.
Open Console in any browser and see if you see any errors that mention not being able to find the source path of the picture.
It should give you a hint of where your browser is trying to find that img.
All of your guy's responses were correct. I had the correct path. It was a Golang thing. I did not make a handlefunc when the server wants the /image.png. It was never serving the image, it just was doing nothing with it. Thank you for the responses.
I've been trying to resolve this issue with my website (www.wintonbrownmusic.online). I've attached a picture of how my site looks locally. When I upload it through GoDaddy, the site looks differently. I understand that others have had this issue but not sure where/how to change the CSS file to link to my website so it'll look the way that it should. Can someone assist?
I'm not sure what your hosting / creating it with, but I had a quick look at your site and found one issue.
Your HTML file is looking for the bootstrap.css file in the assets/css folder, but it appears to be in the root folder.
unless your hosting with something that is supposed to find it there.
not sure.
but when is use http://www.wintonbrownmusic.online/assets/css/bootstrap.css is doesn't work, but if I use http://www.wintonbrownmusic.online/bootstrap.css it does work.
hope that helps.
You have problems with path, If you open the console in inspect element it will show you that you have problems in calling the required files css, js, and other files.
You need to upload folders properly in the host, you need to add folders like you have in local folders in your computers. "assets" folder is missing and you just upload files inside there.
change your folder name as either assets or css ....
assets/css is a folder name because of the slash (/) browser looking for css folder inside assets folder...just give the folder
name correctly try to avoid usage of special character ,punctutation
in folder name
I have encountered an issue and I really don't know what is causing it. I am working in brackets and the site works perfectly in preview.
However, when I click on the actual index.html file my background images from my scss are missing.
Uploaded images via src are working
Rest of my sass is working
Js is working
Only the images for my backgrounds ( using url ) are not working anymore, so I presume it has something to do with the url.
An example of the scss:
.jumbfirst {
background: url('/imagini/images/background6.jpg');
background-size: cover;
width: $fullwidth;
min-height: 600px;
}
Any ideas? Thank you!
It depends on your devel setup, meaning you use relative paths but depending on the structure of your files and how you run your index.html the browser reads the paths differently.
I'm guessing that double clicking the index.html file doesn't show it from your local server but as an absolute path like
file:///Applications/XAMPP/xamppfiles/htdocs/devel/test/index.html
This example is from a MAC and it's the path to the index.html in the file system.
You should either have a local devel server (e.g. XAMPP) or if you already have one change the address in your browser to something like
http://localhost/devel/test/index.html
In this case I'm calling index.html from my local server, inside the devel/test/ directory.
Hope this helps.
It's because path relativity to your image file. When it comes to domain image shows because the path is set to current directory. But with index.html image path will be converted to something like this http://www.example.com/index.html/imagini/images/background6.jpg. Since the browser try to find image in that path image wont be found. Check your console in developer tools of chrome browser. You may get more details from there.
This might be fixed by removing starting / from your image url or creating a .htaccess with proper parameters.
I am just learning web development and am having a problem I just can't seem to fix.
I have images I want to display on a page, in my ftp they are in book/detailed_image
On my page I have the img src
<img src="/new/site/images/book/detailed_image/book_one_detailed_View.jpg">
I have checked multiple times and the source is correct. If I move the image up a directory to the book directory and change the src the images display correctly.
What could be the cause of this?
The file attributes of the book and detailed_image directories are the same has are the attributes of the image files.
Using firebug it says the url failed to load.
If you have your html file in the same location as your new folder then there is no need to put a forward slash at the beginning of your url.
Change:
<img src="/new/site/images/book/detailed_image/book_one_detailed_View.jpg">
To:
<img src="new/site/images/book/detailed_image/book_one_detailed_View.jpg">
I think it is a problem with the permissions of the folder "detailed_image". If you do a chmod 755 detailed_image then it will work.
this probably isn't the case for you, but I had the same problem - I got a 404 not found error with the image in images/Paris/p1.png but if I moved the image into the images folder it displayed correctly....I fixed my issue by changing the name of the 'Paris' folder to 'paris' - I have no idea why but it worked...
I just solved the issue which I also had: it seems that the subdir "Images" has to have the same rights as the images contained therein.
I changed the access rights for the folder to "755" and added to include all subdirs with the same rights, now it works!
Hope it does the same for you...