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.
Related
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
i am practicing html using my computer and i run the html file using the "Live Server" add-on in vscode. the image doesnt show up with the relative path:
<img src="../html/images/coffee background.jpeg" alt="tx"/>
my root folder is the css folder, which i have opened in vs code. index.html is stored in this css folder.
the image is stored in the images folder inside the html folder, which is stored in the folder above the css.
using inspect element on the img link in the browser this shows up: Cannot GET /html/images/coffee%20background.jpeg
i'm pretty sure this relative path is correct because when i click "follow link" in vs code when i hover over the link, the image shows up in vs code. why isn't the image displaying when i run the html file?
In a Web server, you cannot get lower than the Web root, while in VSCode, you can (you can drill down to the disk root, I imagine).
So when you say,
my root folder is the css folder, which i have opened in vs code.
index.html is stored in this css folder.
this means that you cannot enter a "sibling" folder of css. Just as, when running and your root is /var/www/customer1_pages, you obviously cannot access "../customer2_pages/passwords.txt".
../html/images (but also ../../../html/images etc.) is the same thing as /html/images, and (for the web server) means <ROOT>/html/images, which in your filesystem would be css/html/images.
You need to set the root folder to html, and place the index there. Or move images inside css.
My website on my server does not want to show the on server saved image.
The path is relative and to my information correct, but I always get a 404 error.
Found no solution after browsing endlessly.
All nessecary information is found in the second picture posted.
Apparently, you use a Framework. The file you have in the view folder isn't the one you send to the browser, it's just a source file that will be used by your Framework entry point: public/index.php. Your root folder is therefore public.
Two things must then be understood:
Even though the line your type is in application/view/index/index.php, the browser will only see it as index.php, located at the base of your site (http://localhost/index.php or somethig like that). The relative path must therefore be written as relative to public.
As your root folder, public, is seen as http://localhost by the browser, you can't use .., there is nothing above the root of your website, for the browser. You must do one of the followings:
Place your image in public/_images instead of application/_images (normally, all the files that can be sent without passing by the PHP preprocessor can go in public)
Place it wherever you want and create a controller that maps a custom URL to your image. Something like /images/(:any) maps to a controller looking into your specific image folder (please, don't, it's not because you can that you should).
My advice: create a public/img folder and place it your images, then you load it with <img src="/img/title_image_me.jpeg" alt="My picture">. (The initial / is very important there!, it's understood as the root folder of your website, Linux-style).
The element is selected properly because other properties apply. There are no console errors.
I have tried:
img/hero.jpg - works when I click on link in VS Code
/img/hero.jpg - works when I click
../../hero.jpg - work when I click
../img/hero.jpg - doesn't work
the full path - works when I click
The problem is seen here. You can see that images called by the src attribute work.
Here is the file structure.
I honestly don't understand your setup / question, but I think if you understand how relative URLs work a little better you can figure it out yourself.
On your server you have your files in somewhere like,
/var/www/html/index.html
/var/www/html/css/styles.css
/var/www/html/img/background.png
On your computer you have your files somewhere like,
C:\Users\Nani\Desktop\Website\index.html
C:\Users\Nani\Desktop\Website\css\styles.css
C:\Users\Nani\Desktop\Website\img\background.png
And in your styles.css you have something like this,
body {
background-image: url('/img/background.png');
}
Starting the URL with / tells the browser to interpret it as the root directory. On a Windows PC it will be C:\ and on a Linux PC it'll be /.
However, when you access the page once it is online from a url like https://example.com, the root directory becomes https://example.com/.
Therefore, using /img/background.png will make it look for the image at https://example.com/img/background.png once it is online, but on your local machine it'll be looking for the image at C:\img\background.png
Starting the url without the slash like this, img/background.png looks for the image relative to the folder that the css file is in. So in that case online it'll look for the background here at https://example.com/css/img/background.png and on your local machine it'll look in C:\Users\Nani\Desktop\Website\css\img\background.png
In my example, the best solution would be to use ../img/background.png, that'll look up one directory relative to the css folder, and then in the img folder. That'll work consistently on both your own computer and once it is uploaded.
That should be enough to figure out what you need to do assuming that the problem is the way the url path is declared. Otherwise, the problem might be with something else. For example, it seems like you're using SCSS. Perhaps the SCSS isn't compiled on your local machine (or hasn't been in a while), but it is compiled on the live server?
It works on live server because its settings make location of index.html a root of your document (/). When you open index.html directly your root is different and images aren't loaded from correct location if you start the path with /.
Best Practice
It is best practice to use relative file paths (if possible).
When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains.
I had the same problem and it turns out that I wrote the path wrongly. You have to write the url based on where the css file is, not where the index file is. Because the one that reads the url is the css file. So it should look like this:
body {background-image: url('../img/background.png');}
Because your CSS and your IMG are in different folders.
Apologies if this is an idiotic question: I used the following src declaration within an img tag to display an image on a Bootstrap website in phpstorm under a laravel blade file: src="C:\Users\MAHE\Pictures\Wallpapers\photo.jpg".
The image does not display; it's just invisible because the mouse pointer is showing the hand symbol when hovered; however, the image displays perfectly when the src declaration is:
src="http://weknowyourdreamz.com/images/apple/apple-02.jpg"
The first link is pointing locally (C: drive). Are you using a localhost or displaying it locally or is it live on a server?
If your website is hosted locally:
Use a relative path, example: images/file_01.jpg
If your website is live:
Use a link to an image that is on a server, as the path is meaningless in this context.
EDIT:
(Elaboration on relative paths to give more clarity as per comment)
The location for the relative path would be wherever the file is in relation to the file that you are trying to link from, so you would need to host the file with the site in order to achieve this. The link itself would depend on your file structure, a typical link would read such as: ../images/cat_01.jpg (the preceding "/" , "./", "../" represent Root directory, current working directory, and parent directory, respectively).
This Link provides a good summary of Relative vs Absolute paths.
If you cannot achieve this then host the image wherever you can and provide the entire URL for the image. Example src="http://www.forexample.com/images/cat_01.jpg".
As you should now be able to see, this is why the second link works. Your file can actually access this image whereas the first link points to a specific location on a computer - this makes no sense in a web environment.