Below is my handlebar page and image of my file structure, I am not able to load any images using these handlebars, not sure what is causing this:
<div>
<h1>HI</h1>
<img src="images/normal.gif">
</div>
main hanlebars:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form validation</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/public/css/style.css">
</head>
<body>
{{{body}}}
</body>
</html>
The error I get is:
localhost/:12 GET http://localhost:3000/images/normal.gif 404 (Not Found)
If I use the full path I get:
Not allowed to load local resource:
I don't know why this does not work. I tried /images/normal.gif. Also tried adding other images which are part of the people folder but it just displays a broken image.
place images folder inside the public folder and register it inside the index.js file.
app.use("/images", express.static(path.join(__dirname, "/public/images")));
then use image
<img src='images/normal.gif'>
The images folder should have been in public folder because in app.js static was using /public
Related
Maybe I just have this whole idea wrong, so lets check this out. I have the following HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/xyz">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<app-root></app-root>
<script src="runtime.js" defer=""></script><script src="polyfills.js" defer=""></script><script src="main.js" defer=""></script></body>
</html>
Now, when I try to load this in the browser with the following url: http://localhost:8080/xyz
it loads the index.html but for all the assets (styles and javascript files) I get 404
I would expect, because I have that base href="/xyz" that it would prefix all asset urls with that url, but as you can see it doesn't.
For completeness, here is my file structure:
./server.js
./xyz/index.html
styles.css
.....
So the server is serving all the files from the /xyz path
Relative paths are resolved by taking the base URL (http://localhost:8080/xyz), removing everything after the last / in the path (giving you http://localhost:8080/) and then appending the new path (http://localhost:8080/styles.css).
If you want /xyz/styles.css then you need to put a / on the end of your base path: <base href="/xyz/">
I can't seem to find the error in the code, I am not very familiar with HTML. I keep getting a syntax error on line one:
File "C:\Users\____\Desktop\Flask_test\index.html", line 1
<html>
^
SyntaxError: invalid syntax
Here is my code:
<html>
<head>
<title>Home page</title>
</head>
<body>
<h1>Home Page!</h1>
<p>Hello!</p>
</body>
</html>
I'm not familiar with Flask but I believe it's requesting the !DOCTYPE at the beginning. Try adding <!DOCTYPE html> before the starting HTML tag.
Try adding <!DOCTYPE html> and improve the code's formatting.
<!DOCTYPE html>
<html>
<head>
<title>Home page</title>
</head>
<body>
<h1>Home Page!</h1>
<p>Hello!</p>
</body>
</html>
So you are getting Internal Server Error (500)
that means the code of python you have written does work but when a request comes to the server an error occurs, or Flask just cant find your index.html file
by default Flask will search for your index.html file in a folder named "templates" or
you can set the directory of your templates(HTML files) explicitly
Anyway I wrote this script for you, try to run it on your local machine
from flask import Flask, render_template
app = Flask(__name__,
static_url_path='',
static_folder='static',
template_folder='myTemplates')
#app.route('/')
def mainRouter():
return render_template("index.html")
You need to create a directory named "myTemplates" and put your index.html file inside it, you can change the name of course inside the script (template_folder='myTemplates') to use another directory.
and if you have any static files, like images or audio files, videos, etc...
you need to create a directory called "static" and put all your static files there or you can change its name in the script (static_folder='static') to whatever you like.
Add !DOCTYPE + HTML LANG.
<!DOCTYPE html>
<html lang="en-US">
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Home page</title>
</head>
<body>
<h1>Home Page!</h1>
<p>Hello!</p>
</body>
</html>
I'm trying to make a web site in code, and I added an image to the page: <img src"../img/image.png">. When I load the page in a browser I get a square box, and it says it could not load image.
I have tried it in Windows 10 and Kubuntu 18.04 - same error. I get the same error when I make a CSS file. If I put the image in the root folder it works. Any ideas?
Should be
<img src="../img/image.png">. You are missing the =
did not work here the top of my html page same error only way it works it I put ../WebSite/img for the folder . But when I ftp the page no logo or background . But the files are there
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../css/Main.css" />
</head>
<body>
<img src="../img/Logo.png">
</body>
</html>
I created the assets folder, that folder include the images folder then i paste the png type image (bill.png) in image directory.
Here is the code with image path
<img src="{{ asset('assets/images/bill.png') }}" class="center-block">
Important thing
assets folder in public directory
Put the image in the same folder as the webpage is and try to change source to that image name.
OR
Try clearing your browser cache data if you want image to be loaded from assests folder.
I am getting 404 error while load css in my code
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>-------------</title>
<link type="text/css" rel="stylesheet" href="../../resources/css/hompage.css">
</head>
<body >
</body>
</html>
every time I am confusing and not able to load resources.
How to target resource of eclipse to load in browser. I have doubt href="../../resources/css/hompage.css path only plese find attachement.
Try move your css file, or if IDE support it, use absolute path, like /css/*
I want to have a new folder containing a set of new html files. All the images inside it are in the format src="image.png" and image.png is located in the root folder. But when you put the HTML file in a new folder it can't find the image. You have to have it in the format src="../root folder/folder/image.png" to make it work. Which would mean a lot of pasting. I have tried putting image.png inside the folder but no change.
Use the <base> element. It allows you to specify a URL for all relative URLs in a page.
For example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>This is an example for the <base> element</title>
<base href="http://www.example.com/news/index.html">
</head>
<body>
<p>Visit the archives.</p>
</body>
</html>
The link in the this example would be a link to "http://www.example.com/news/archives.html".
For you, the base URL may be something as simple as <base href="http://www.yoursite.com/">. This would make images specificed as src="image.png" resolve as "http://www.yoursite.com/image.png"
See also https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
You need to set the base tag. If you add the tag in your page <head> like this:
<base href="http://yoursite.tld/folder/">
it should display images and with sources relative to this base path.