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.
Related
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
My CSS file somehow not loaded when i clicked my html file directly in my folder. But somehow with vscode when go live after compiling the scss to css it works fine.
do you guys have any idea why?
I place my css file in dist folder when using the Live Sass Compiler.
I tried open the html directly from folder using all the browser i have but the css not loaded.
body {
background-color: aqua;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/dist/test.css">
</head>
<body>
<h1> TEST </h1>
</body>
</html>
Because you use absolute path, you should use relative path
instead of /dist/test.csstry dist/test.css
If you want to read more, here is an article about absolute/relative path:
https://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
The preview work on vscode because vscode probably use a localserver to run your html file. something like localhost:3000/index.html. So in this case your html file is at the root of the domain, that's why the absolute path will be the same as the relative path
You can try this
<link rel="stylesheet" type="text/css" href="/dist/test.css"/>
you can try ./dist/test.css, this will also works fine
This is how my folder looks like.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible">
<link rel="stylesheet" href="../src/App.css">
<title>Document</title>
</head>
<body>
<div id="practice"></div>
<div id="farm"></div>
</body>
</html>
And this is the code, but still React won't track the path from the HTML. CSS file won't be loaded even the path is correct.
I can open the file by clicking CTRL + LMB in VSC like a GIF above. For testing, I changed the path as ./src/App.css then VSC couldn't open it because the path is wrong.
Why it keeps happening and are there any ways to fix this problem?
Thanks to listen.
You should import your css in app.js or any js file on your src folder instead calling it on public folder. You should see it on the app.js since I think you using create-react-app so you should see some example on that js file. You doing it wrong.
If you really want to do that did you try to add %PUBLIC_URL%/src/App.css ?
import '../src/App.css'
I have an local folder with my index.html file in it. It also contains a css folder containing mystyle.css and an images folder containing all of my images. I'm trying to create a background image but it won't display. Can anyone see why?
My css is working correctly and below is what I have in my css:
/*CUSTOM*/
body {
background-image:url('..\images\red_curtain.jpg');
}
Here is my HTML:
<head>
<link rel="stylesheet" type="text/css" href="css\mystyle.css" />
<meta http-equiv="content-type" content="text/php; charset=utf-8" />
Try using forward slashes instead of back slashes in your CSS like so:
background-image:url('../images/red_curtain.jpg');
In the Project of GWT/GXT.
in project.html.
I added the favicon and change the color of the body and also put an image .
But when i run the web project. i cant see the the change in body color, favicon and the Image.
My web Projects starts from login page which is in a center of on the RootPanel.
I want add a Image and Fevicon in HTML
In my test page test.html i can display favicon and image.
gwt project.html
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>My Page</title>
<link rel="icon" type="image/png" href="fevicon.png" />
<link rel="stylesheet" type="text/css" href="gxt/css/gxt-all.css" />
<link rel="stylesheet" type="text/css" href="project.css" />
</head>
<body style="background-color:d8d8d8;>
<img class="normal" src="main.png" width="700" height="80" />
<script language='javascript' src='project/project.nocache.js'></script>
<iframe src="javascript:''" id="__gwt_historyFrame" style="position:absolute;width:0;height:0;border:0"></iframe>
</body>
</html
>
As #Manolo suggest check working folder. i.e. war/modulename and also clear cache of browser. because if browser already have cache of it so sometime changes does not reflect.
It seems you are modifying a page which is not being copied to the working folder of your app
when running in web mode.
Sometimes eclipse does not update files from sources to working dir.
Try to find the file test.html in other folders and compare their sizes.
In your src/main/webapp changes not seen at a moment. Refresh project and restart development mode. If any changes recompile your project(Last choice).