I have my css which contains a class
.Img{
background: url('../assets/Trump.png');
}
And the html looks like this :
<div class="Img">
But when I want to have it like this
<div class="Img" style="background: url('../assets/Trump.png');">
the image won't load for me and I get an error
>GET http://localhost:8080/assets/Trump.png 404 (Not Found)
I am working with vue.js 2.0 and webpack
The main issue here is relative paths.
If you have this structure for example:
/page.html
/static/
/assets/
/Trump.png
/css/
/file.css
And inside your page.html you have a <link> tag to your css (in static/assets/css/file.css), the call to ../assets/Trump.png from that css file will get to the correct place (because from the /css directory - 1 directory up is the static directory, and from there we go inside the assets and everything is ok).
However - If we are inside the / directory (where the page.html exists), this is also our root directory, when we try to go to ../assets/Trump.png the relative path we get is /assets/Trump.png (which does not exists in our server. The correct path should be /static/assets/Trump.png).
You should check the structure of your directories and put the correct relative path.
Remove the apostrophes in the url(), url() function does not need them
<div class="Img" style="background: url(../assets/Trump.png);">
Edit your image url to this
<div class="Img" style="background-image: url('assets/Trump.png');">
when you are declaring this background-property in your css the url is correct the assets folder is in the parent directory of css. but when using inline css the assets and the html file are in the same directory that is why you are getting this error.
Check your image path, there's a chance that's the issue. Check this out: CSS background image URL path
Related
image :- root_folder\views\img\home_bg.jpg
pug file:- root_folder\views\index.pug
css file:- root_folder\views\assets\css\style.css
file directory
I am trying to create simple site using NodeJS, I've no knowledge of pug coding but I used html to pug converter to create a pug file.
Here is my html code for 'content' container with img tag and path
<div class="content">
<img src="/views/img/home_bg.jpg" alt="">
</div>
and here is my pug code for the same:-
.content
img(src='../../Project 1/views/img/home_bg.jpg' alt='')
here is my output using pug:-
pug results
here is my output using html:-
result which i get using html
what can be the valid path in pug template? please advise?
have you tried out to remove one ../, or to put the same src link as in the html, I see that the image isn't loading, so this is just an assumption that maybe the src link is not working.
/views/img/home_bg.jpg
.content
img(src='../Project 1/views/img/home_bg.jpg' alt='')
Maybe this could help.
image :- root_folder\views\img\home_bg.jpg
pug file:- root_folder\views\index.pug
css file:- root_folder\views\assets\css\style.css
file directory
I am trying to create simple site using NodeJS, I've no knowledge of pug coding but I used html to pug converter to create a pug file.
Here is my html code for 'content' container with img tag and path
<div class="content">
<img src="/views/img/home_bg.jpg" alt="">
</div>
pathes you give, always are relative to the file that contains the path.
The path: <img src="/views/img/home_bg.jpg" alt=""> will lead to the folder: root_folder/views/views/img/home_bg.jpg which does not exist. the correct tag should be:
<div class="content">
<img src="img/home_bg.jpg" alt="">
</div>
The same applies to this code line: .content img(src='../../Project 1/views/img/home_bg.jpg' alt='') it will move 2 folder below and lead to: root_folder/Project 1/views/img/home_bg.jpg which also does not exist according to your file directory.
I'm making a Landing page and I want to put there some png images links but they don't show. When I set png as background image I saw it on the page but casual <img>doesnt work. Path of the file is okay, I'm sure of that, but console says "404 file not found".When I'm using exactly the same path as bg image it works perfectly I don't know why... I'm writing styles in SCSS and using components for different parts of the site if it matters.
Plz help I'm new T.T
here are the links
<div id='media'>
<a target='_blank' href="https://en.wikipedia.org/wiki/Facebook">
<img src="/src/images/facebook.png" alt="ikona facebooka">
</a>
<a target="_blank" href="https://pl.wikipedia.org/wiki/LinkedIn">
<img src="/src/images/linkedin.png" alt="ikona linkedin">
</a>
</div>
and structures of my folders looks like that:
./src:
../fonts
../images<--here are the png files
../js
../sass
../templates:
.../components
...index.html
./web:
../css
../images
..index.html
Your styles.css file is located in a different place than your template files so the path SHOULD be different.
From your stylesheet location
web/css/style.css -> ../../src/images/filename.png
From your template location
src/templates/index.html -> ../../web/images/filename.png
Here's what to do to troubleshoot file paths:
Open dev tools => network tab (select images in your case)
Look for the file in question
If it's 404ing your path could be bad.
Try to load your image in a new browser tab with the full URL path you THINK it should be. (make sure it's serving properly)
Then check that full/serving file URL against the URL in your code
Is this a WordPress site? If so make sure to output the full path with
<?php bloginfo('template_directory'); ?>/path/filename.jpg
Remove the '/' from the beginning of the image path.
So change this:
<img src="/src/images/facebook.png" alt="ikona facebooka">
To this:
<img src="src/images/facebook.png" alt="ikona facebooka">
I'm pretty new to HTML and I'm trying to add some images to my page. Images are located in a subfolder , but two subfolders won't work:
<img id="lungIcon" src="icon/red/001-medical.svg">
<img id="liverIcon" src="icon/003-human-liver.svg">
liverIcon is show, but lungIcon not. red is a subfolder of icon and my editor (WebStorm) even autofills the src of lungIcon because it can find the file.
Inside the icon folder
As you can see red is inside icon. red contains the same files as icon but in a different color. Why won't lungIcon.svg display?
Try using relative path (`./your/path/to/img) eg:
<img id="lungIcon" src="./icon/red/001-medical.svg">
<img id="liverIcon" src="./icon/003-human-liver.svg">
Or try using full path. like src="/images/icon.svg", that's how I do mine.
Why I can't see my image even if I have the right link?
Code:
<img href="Layout-home.jpg" style="">
The path of the root is in a USB ("grafica"), and the enteire link is:
file:///E:/MIKY-BEN/grafica/Layout-home.jpg
"grafica" is the ROOT. (whith the index.html file inside).
The attribute is src, not href. This error would have been picked up if you had used a validator.
I have my images folder inside the same subdirectory folder. .
For example:
Domain: http://www.hebronics4u.com / subdirectory: webTract (http://hebronics4u.com/webTract/index.html - the images folder is in the same subdirectory folder.
I have tried all the following ways to get my pics to show and they will not show.
Here is the code:
<img src="../webTract/images/billyGraham.png">
<img src="webTract/images/billyGraham.png">
<img src="images/billyGraham.png">
Does anyone have any suggestions?
Try to use absolute path. <img src="/webTract/images/billyGraham.png">
What are there the errors in console logs?
If the images are in exactly the same sub-directory (for example)
http://hebronics4u.com/webTract/index.html is your working file and
http://hebronics4u.com/webTract/billyGraham.png is where your file is situated, simply use the name of the image.
E.g.
<img src="billyGraham.png">
<img src="./images/billyGraham.png">
Also fix your permission on the subfolders.