I'm learning how to make websites, and I'm stuck on a problem that I can't find a solution to, I hope you can help me.
I can't connect either a CSS file or an image for the site icon, but if I use it works.
I'm using Node.Js for backend with EJS for frontend.
That's how I connect image:
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href='src/images/favicon-32x32.png'>
<title>Title</title>
And that's for CSS file:
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<h1 class="ws_title">Title</h1>
My css file and html template are in the same directory: src/views/project
And all the images are in the src/images
I've tried using different browsers but it's not working
Do you know what's the problem might be?
Updated: I’ve just found that with EJS I must use express.static, but I don’t understand what should I do with it, can you explain?
I cloned Your project and made some adjustments.
Rename images directory to public directory.
Move style.css file from /views/pocketsage/ to public directory.
Add in server.js file Serving static files, this line of code app.use("/", express.static(path.join(__dirname, "public")));
server.js add path, const path = require("path");
main.ejs change href to <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
main.ejs change src <img src="avatar.png" alt="" class="info-card__photo" />
Restart the Server and browser ctrl+f5 and Voila.
Folder&file server.js and main.ejs code snippets and output in terminal of VScode:
Output in browser
http://127.0.0.1:3002/pocketsages
and console with AVATAR and FAVICON:
Related
I am making a Django app and when I try to run the different pages the HTML is loading but not the CSS, when I open the files normally (not from the server) it all works fine, but when I run them through the server it searches for the CSS at the URL page. Here is an example:
at URL:http://127.0.0.1:8000/profile/create/
the HTML is all working but CSS isn't and I get this in the terminal:
[21/Dec/2022 10:11:54] "GET /profile/create/ HTTP/1.1" 200 1374
Not Found: /profile/create/style.css
[21/Dec/2022 10:11:54] "GET /profile/create/style.css HTTP/1.1" 404 2993
The HTML and CSS are in the same directory and here is my connection from my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>MyPlantApp</title>
</head>
You need to create a folder for your static files and store all your static files there.
Set your static files directory using this code in your settings.py file:
STATICFILES_DIRS = [
(os.path.join(BASE_DIR, "static/")),
]
Your static folder should look like this static file folder.
Also you need to use the proper templating syntax to specify find your static files. Change this:
<link rel="stylesheet" type="text/css" href="style.css">
to this:
<link rel="stylesheet" type="text/css" href="{% static 'static/style.css' %}">
Have you tried putting / before style.css?
You are trying to get style.css from relative path of HTML file.
If u put / before style.css it will try to get css file from root directory.
/style.css instead of style.css
<!-- Your Code -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Might help -->
<link rel="stylesheet" type="text/css" href="/style.css">
I am having a nightmare getting custom css to load into a Flask HTML template. I have tried everything I can think of, and haven't really had this issue before but am stumped now. File tree as follows:
/static
/css
styles.css
/templates
index.html
main.py
Index.html is rendering correctly, but css is not applied or loaded. index css link as follows:
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/styles.css') }}">
</head>
Any help is appreciated!
Try adding css externally without using 'url_for'.
In your case try the following:
<link rel="stylesheet" type="text/css" href="./static/css/styles.css">
I am trying to link my CSS and HTML. My CSS file is in static folder where as index file in templates folder.
code : Header of index.html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMI App</title>
<link href="C:\Users\Shweta\MFRTPPython\static\main.css" rel="stylesheet" type="text/css">
</head>
Even after providing it's proper path, I am unable to link them.
Try using below way, it is almost similar of what you've used but you need to know how to locate the external file.
If you have a file in a location which is outside from the project folder then you can try something like this:
<link href="file:///C:\Users\Shweta\MFRTPPython\static\main.css" rel="stylesheet" type="text/css">
OR
if you know about how absolute and relative path works then below is what you can try:
<link rel="stylesheet" type="text/css" href="./yourDirectory/yourFile.css"
My advice to you is to create a folder in your project and add that stylesheet file into that folder and refer that path in the html.
Kindly go through this path for better understanding of absolute and relativepath.
I'm starting a new project with Angular and facing an issue.
When I am trying to load an external CSS file with <link> it doesn't work but when I am using internal style with #import it does work!
Doesn't work with :<link rel="stylesheet" type="text/css" src="transmission.min.css">
Works with :<style>#import url('transmission.min.css');</style>
My files are located in the same directory (root of the app) :
/
/index.html
/transmission.min.css
/transmission.min.js
My CSS and JS files are concatenated and minified with grunt but I tried without it and same result.
Here is my index.html file :
<!doctype html>
<html>
<head>
<title>Transmission</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" src="transmission.min.css">
<style>
#import url('transmission.min.css');
</style>
<base href="/">
</head>
<body ng-app="transmission">
<div ng-view=""></div>
<script src="transmission.min.js"></script>
</body>
My CSS file just contain body{background-color: red;}
I checked my nginx configuration twice, and everything seems to be just fine.
I also checked with Safari inspector, I can access the CSS file at http://transmission.dev/transmission.min.css.
But it doesn't appears in the resources tab.
Moreover my Angular application loads perfectly.
If you have any idea ? :-D
Thank you
link tag uses href attribute as opposed the the src as you have specified. Please change and check.
It should be
<link rel="stylesheet" type="text/css" href="transmission.min.css">
link tag uses href and not src
Hope it helps!
My Sinatra app has typical file hierarchy:
root contains:
file "hc.rb"
file "endpoints.yml"
dir "views"
dir "public"
"view" contains .erb files
public dir contains:
file "style.css"
dir "images"
in dir images I have favicon and 404 pictures.
here is part of the code:
not_found.erb
<center><img src="images/404.png" alt="404 Not Found"></center>
hc.rb
not_found do
erb :not_found
end
layout.erb
<!doctype html>
<html lang="en">
<head>
<title></title>
<link rel="icon" href="images/favicon.ico"/>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
</header>
<section>
<%= yield %>
</section>
</body>
</html>
When I type localhost:[port]/smthnonexisting
I get 404 image on the screen
But when I type additional level
localhost:[port]/smthnonexisting/andsmthmore
I do not see the image and I see only 404 Not Found and broken image ico.
What can be the reason?
Thanks
The reason for this is that you're using a path relative to the current folder. When you visit http://localhost/smthnonexisting your browser is looking for the styles.css file at /styles.css. When you visit http://localhost/smthnonexisting/andsmthmore, your browser is looking for the styles.css file at /smthnonexisting/styles.css.
This is solved by keeping your references relative to the 'root' folder, by a / before styles.css, like so:
<link rel="stylesheet" href="/styles.css">
You should also do the same with the favicon, and any other included files:
<link rel="icon" href="/images/favicon.ico" />