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.
Related
is there a way to show symlinked img correctly via src attribute?
The server is running by express, and the symlinked image is serving by static file.
use symlink file <img src="http://server:3000/public/1-symlinked.jpg" />, it doesn't work.
use normal file <img src="http://server:3000/public/1.jpg" />, it works.
first you have to save the image in your HTML Folder than you have to open the folder in your vs code than you can use tis tag it will work
<img scr="your image name "> eg : <img scr= " image.png">
would appreciate some help here, my img html tag has the correct file path. However, when I launch the express server and try to view the image on vscod Browser Preview, I cannot see it (example picture in the link below). What could be the problem?
<div class="dashboard"><!--Dashboard START-->
<section class="navigation"><!--Navigation START-->
<img src="imgs/iHome.png" alt="">
</section><!--Navigation END-->
This is a picture of the html file along with the directories on the left and the html img tag in the middle, and the Browser Preview with the missing image on the right
The App needs a src folder that has a sub folder assets. your Frontend js should be hosted in the src folder.
put your image in the src -> assets -> images/pic01.jpeg
then call it like this:
<img src="assets/images/pic01.png" alt="">
Part 1:
I have been searching for a while now and have found a few options that work in markdown but not how I would like. I am looking for a way to add images to a markdown files HTML.
Currently this works in the md files:
But, I am trying to add a class to the above with no success.
What I have tried so far:
![img description][../img/splash/homepage-tall.jpg]{: .img-fluid }
{.img-fluid}
![img description][../img/splash/homepage-tall.jpg]{: class=img-fluid }
Can a class be added to markdown?
Part 2:
I even tried going the direct HTML route but, the relative path does not work. Is there a way to link the images using HTML in a markdown file?
<img class="module" src="../img/splash/homepage-tall.jpg" alt=" "/>
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
I have a few folders like Pages(html files go here), Javascript(script files), CSS(css files), images.
In my html file I wanna give path and I am not sure how I am supposed to give it.
If the file is going to be in the same folder the following will work
<img src="a_logo.gif" alt=""/>
But in my case I tried
<img src="../images/a_logo.gif" alt=""/>
which didn't work.
Any leads?
Thanks
Folder Structure
Folder A
|
|-----Folder VT
|
|-----HTML(a.html)
|-----JS
|-----CSS
|-----images
Inside a.html I wanna add js,css,images.
Only use of images/a_logo.gif will help to run code properly,You dont need to write ../images/
so here is a code:
<img src="images/a.gif" alt=""/>
Also, check if given images are present image folder and naming convention provided are right.