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.
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
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.
so strange problem.
I finished my website and pushed the project to github.com.
The picture section of my page won't work because the pictures are added into the html with .jpg but github has it as .JPG (capitalized).
So if you go to my site: https://dhuber666.github.io/Frodo/fotos.html you won't see the pictures. However if you click on one of the missing file icon you will get the link to the full picture (but it say that the page does not exist because filename is written in lowercase letter (as it should be) but github has the images capitalized (.JPG)
If you edit the link like so: /Frodo/images/pic4.JPG (sry have to shorten that I can't post more then one link)
it infect works.
So what is this problem? On my local machine it's fine.
I uploaded it on windows with the github shell like normal.
So I go to my local images folder and I see the filename like so: pic4.JPG --> If I right click it properties it says pic4.jpg
So I renamed it to pic4.jpg and after hitting enter I got .JPG again.
I deleted the whole file ending enter. Rename it again and write .jpg and enter --> Now it's actually pic4.jpg.
But how can I push it to github, because it does not recognize it as changed file?
Also how can I solve this for feature pictures and uploads?
Bonus: Cute dog pics on my page :P
Thank you!
I do not know why this is happening, but I know how you can fix it.
Solution 1: Go into the html and make the file extension capitalized.
Solution 2: Change it via the command line.
Github only allows for image change through commmand line. Follow the link above to their guide on changing via command line.
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.