I have come into an issue where my webpage will not load a background image in any browser if I open it directly into the browser, but if I open it up via a live server addon for VS code it works entirely fine and loads everything correctly. I have videos attatched to the webpage which load entirely fine in both scenarios, and have come to a bit of a deadend...
file's to see if file pathing is incorrect
Where the image should be loaded
The html file calling the class
This is a guess at the moment but it might be, on the second image that you posted, that you have detailed ../../ twice. This is telling the path to back up by two folders then look for the assets folder.
Looking at your file layout. You have an index page then an assets folder which contains a videos folder which contains the image.
You shouldn't need to back up out of the folders using any itteration of ../ from where you index page is located. The correct path might simply be assets/videos/cover_image.jpg
Related
I have 2 cfm pages in the same folder, doing very similar things. They both produce some reports for user related data. I recently added a loading image to one because some of the queries to generate the reports can take a while.
The second page is a new but very similar page. Since the pages are in the same folder I figured the relative path to the loading image should be the same. However the new page is giving a 404 response for the image request, and when I check the http request header it is adding an extra folder to the relative path and thus unable to find the image.
<img src="../../../Graphics/General/loading.gif">
They are both very similar pages in that they display a simple form, then run some queries and generate a table to display the relevant data to the user. However the relative path above produces "Dev/Menu/Graphics/General/loading.gif" in one page and "Dev/Graphics/General/loading.gif" on the other.
I've since figured out that adding an extra "../" to the image path in the new file has fixed it for the new page, however I am at a loss for why this fix was necessary and why it worked.
<img src="../../../../Graphics/General/loading.gif">
I would expect that since both pages are in the same exact folder, that the relative path to the given image would be exactly the same. I am mostly just curious why that is not the case.
The two reports are in the same folder. Are you loading these pages directly?
yourSite.com/reports/report1.cfm
yourSite.com/reports/report2.cfm
Or are these files loaded via other parent pages?
yourSite.com/some/other/folder/with/include_report1.cfm
yourSite.com/yet/another/folder/that/contains/include_report2.cfm
Often, it's better to load images directly from web root in order to avoid relative pathing issues like these. If the Graphics folder is at the root, then just reference the image in both files like so:
<img src="/Graphics/General/loading.gif">
This way, it doesn't matter what file includes them and renders the final HTML to the browser, the image will be referenced from the web root no matter what.
So, I hope this question doesn't annoy experts coz lets face it, I am a novice.
I want to get an answer as its key to my progressing with my website.
Say my website is www.example.com. I got this public hosting, and in the public_html folder i put a simple index.php file which works fine; "hello world" is displayed.
Then I put image_1.jpg in the public_html folder, and typed a direct path in my browser::
www.example.com/image_1.jpg.
Nothing gets displayed, just a black screen. But, the image is seen if I do the same on wampserver.
Afterwords, i put an image tag in the index.php file as follows:
img src="image_1.jpg"
Even then, I see the "hello world" on top, but in place of the image, i see just this standard thumbnail of a broken image. What is going on? It works on wampserver. Is there something I am missing like viewing rights? When I redownload the image, it seems corrupted (I used filezilla to upload it, and download it back again to see if its fine).
Are there any "rules" about putting images directly in the public_html folder and accessing them directly using your domain name like :: www.yourdomain.com/image1.jpg? because it works on Wampserver, not on public hosting..
Thanksss... I will (and I promise I will) send a beer to whoever can help me sort this out!
Nothing gets displayed, just a black screen.
That means your images are there. If images don't exist on the server then you will get a 404. Try reuploading and changing (or hard refreshing) browser.
I am trying to get my css file using background: url(); to use the correct path to display my images on my index.html, this webpage is a 1 page index.html which just displays static content and some images, nothing fancy, I currently have it on google drive being hosted perfectly fine.
It's just the image paths are not working when they are set to relative which would be "img/example.png" and they don't work with the link you get from setting the images to public so they can be viewed by anyone which for example would be "https://drive.google.com/file/d/IMAGE_CODE/view?usp=sharing"
How have you managed to get your images to load on drive using CSS background: url();?
I don't want a direct sort of link so every time my website refreshes it has to re download the images, that creates very slow refresh page loading, I want it to look for them just like a relative path with much faster loading.
You may have an issue with your path being in the wrong directory, so you would use
../
to move up a directory until the correct one is reached. For example, if your css file is located in a folder structure such as "root/assets/stylesheets/style.css" and your image is at "root/img/image.png" then within your css file, you would have to use the following code
background-image: url('../../img/image.png');
to move up two directories to properly call your image.
I have made my first website and in the preview in Safari and Chrome from Dreamweaver it works fine. But after uploading my files with Filezilla to 000webhost and typing in the URL, only the index page loads, links to other pages on the site don't work, images are broken and the css isn't applied.
I'm think it is because I haven't named the files correctly in the code, but I have no idea what to call them in order to get it right.
The file you upload to is public_html. So I've tried http://www.webaddress/public_html/Pages/entertainment.html but it didn't change anything.
Thanks for any help!
Without code examples it's very difficult to answer this, but it's probably just that your URL format is incorrect.
For example, if you've got example.com/example/example.html and that page contains a CSS file with a location of /css/style.css, the web browser will look for example.com/css/style.css because the slash at the beginning of the URL tells it to go to the root.
In this case, your CSS file is probably actually in example.com/example/css/style.css. Remove the beginning slash so the location is css/style.css and the web browser will look for the file using the current page's location as it's starting point.
After i hosted my HTML5 application on Apache tomcat.My page is not showing any background image.
I have placed my project folder (MyExpert) inside root folder and inside MyExpert folder there is an image folder and a css folder .I am giving background image as
background-image:url(../images/myprofile_on.png)
in my css file but images are not coming on my pages except home page.Though application is working fine on localhost.I tried various thing but no fruitful result.
it looks like it will be a simple referencing or permissions issue here, try nivgating directly to the image in your browser and see if you can navigate to it manually so is this case given your description it would be:
http://www.yourdomain.com/MyExpert/images/myprofile_on.png
If that works then its a simple referencing issue from you css file, if it returns a forbidden access page you know its permissions, if it returns a file not found I would recommend checking the casing on your CSS url to ensure it matches the file path as if your box is linux then file paths are most likely case sensitive.