<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="{{ url_for('static',filename='favicon.ico') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='styles.css') }}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="lib/tablesorter-master/js/jquery.tablesorter.js" type="text/javascript"></script>
...
My folder structure is..
home
<-lib/tablesorter-master/js/jquery.tablesorter.js
<-templates/index.html
<-static/styles.css
I'm running a flask application and the py script is in the home directory.
I keep getting a "404/NOT FOUND" when the html loads on my browser (Chrome - localhost). I have read through similar threads here and elsewhere, but cannot seem to get this to work (most topic threads were around folder structures).
Any help would be appreciated.
The error message was straight-forward....the browser was expecting the file to be served via the flask server, which is not the normal way of doing this. I've used href in the same way as I'd use it to serve static files, and the browser does not complain now.
Related
I hope you are doing well.
The webpage does not load correctly on the first load, but it works perfectly whenever I refresh the page. Also, on the first load, I get an error(Failed to load resource: the server responded with a status of 404 (Not Found)).
First load:
On refresh:
Main index file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<!-- MAIN CSS -->
<link rel="stylesheet" href="css/editor.css">
</head>
<body>
...
<!-- SCRIPTS -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/custom.js"></script>
<link rel="stylesheet" href="app.css">
</body>
</html>
Let me know if you have any questions
Sorry, if it's been already asked. I searched everywhere and I cant why that's happening.
Thanks in advance
First of all, you don't have to be sorry for asking out any questions. No one knows it all.
To the main question, it seems you have too many scripts loading when the site is open and it times out before it could completely finish loading.
It only finishes loading after the refresh as some of the files are already loaded.
Import only CSS and js files you need and try moving some of the scripts to the bottom end of the body tag.
Use CDN URL to load the imported scripts faster
The most common reason for that is a slow server, which takes more time to handle the request than the request default timeout. So, when you refresh, many of the assets are loaded from the cache, allowing the assets that failed to load on the first time to load properly.
Some solutions to this problem is:
Use CDN urls rather than loading the assets from your server <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> instead of <link rel="stylesheet" href="css/bootstrap.min.css">
Use Lazy loading for assets that are not used immediately. More about that here.
Sometimes, the server itself is not the bottle neck, not in terms of computation I mean, but the network is! So, make sure your server's network has enough upload speed to serve your app's needs.
I can also see that you are linking a CSS file app.css at the end of the body, and I guess this is what causing the first image you posted, typically it's a good practice to load the CSS files before the body, and the JS files after it, so that the page looks it loaded faster.
I created a simple html file which should display svg image:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<img src="D:/Angular/hello-world/node_modules/bootstrap-icons/icons/star.svg">
</body>
</html>
It displays fine in Google Chrome but Firefox displays nothing at all but that's another issue...
When I'm running exactly the same code but in an Angular project inside index.html Google Chrome shows the "couldn't load" image. Does somebody know why in a pure html file it works but when running from Angular project it stops? And why firefox displays nothing?
For an Angular app, images need to be in a specific folder for it to be able to find said images. Move (or copy) the image to src/assets and use the path assets/star.svg.
CSS is perfectly loading on the offline webpage (localhost) but on the live website, CSS is not loading.
I am using hosting and domain from the biz.nf website.
I used bootstrap 4 on this website.
My index.html head code:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://www.site.c1.biz/css/style.css" media="screen" />
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
</head>
I saw your website in the inspect mode
its showing style.css is 403 forbidden in the network tab
Check with it
you can check here ERROR 403 in loading resources like CSS and JS in my index.php
Maybe you try using relative css path or check your webserver configuration, because loading the CSS file returned a 403 forbidden error code.
Finnaly I figured it out,
The problem was caused because my images was not in the same directory as of index.html
I tried many things.
Webpage inspect was throwing some error like - anime.min.js error in front of img name which was completely useless.
Many said it as a broken img but it's a different issue.
I already read this question, but does not solved my case, even if is very similar.
I am using Slim framework.
This is my project structure. The Slim routing happens into the public folder.
The page templates/index.phtml needs some JS and CSS, but I get 404 not found.
My templates/index.phtml requires:
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My WebSite</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="style/global.css">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="script/index.js"></script>
</head>
And I get (for example for the index.js):
Not Found
The requested URL /index.js was not found on this server.
Apache/2.4.18 (Ubuntu) Server at blah.blah.blah Port 443
I'm not very familiar with the Slim framework but I know you're using a router and a public folder which leads me to believe that it can't access index.js because it's out of scope. Perhaps try moving your script folder inside your public folder and see if that works! :)
I have created a vue webpack project using vue-cli.
vue init webpack myproject
And then ran the project under dev mode:
npm run dev
I got this error:
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/favicon.ico
So inside webpack, how to import the favicon.ico correctly?
Check out the Project Structure of webpack template: https://vuejs-templates.github.io/webpack/structure.html
Note that there is a static folder, along with node_modules, src, etc.
If you put some image into the static folder, like favicon.png, it will be made available at http://localhost:8080/static/favicon.png
Here is the documentation for static assets: https://vuejs-templates.github.io/webpack/static.html
For your favicon issue, you can put a favicon.ico or favicon.png into the static folder and refer in the <head> of your index.html as follows:
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
<title>My Vue.js app</title>
...
</head>
If you do not define a favicon.ico in your index.html, then the browser will request for a favicon from the website root (default behaviour). If you specify a favicon as above, you will not see that 404 anymore. The favicon will also start showing up in your browser tabs.
As a side note, here is the reason why I prefer PNG instead of ICO file:
favicon.png vs favicon.ico - why should I use PNG instead of ICO?
For some reason, the above solutions did not work for me before converting the default favicon.ico file to favicon.png and renaming it to favicon-xyz.png e.g. (I have put this file in /public folder) and edited the index.html file as follows:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="<%= BASE_URL %>favicon-xyz.png">
.
.
.
</head>
Might be useful for someone.
Little update for Laravel 5/6/7/8/9, place your favicon.ico or favicon.png into the /public folder and refer to it in your index.html like this:
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<title>My Vue.js app</title>
...
</head>
Hope it helps !
As of 2022, #Mani answer is a little outdated as static assets are now served in public folder other than static.
Just generate a .ico favicon file (this site provides free online favicon generation), rename it to favicon.ico and place it in public folder, no need to change index.html, reload and new favicon will be displayed.
You may use vue-pwa-asset-generator in order to generate a full set of favicons foreach platform.
Thanks. This did the trick as per eightballs comments. I needed to move the file to the /public folder and rename it :D
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>gear.png">
<title>Prodigy</title>
</head>
Just add shortcut in rel tag like that :
<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">