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.
Related
For some reason, the image appears when I open it in notepad, but it doesn't work when I open my HTML file in VSCode. Adding the image in the folder of my HTML file and setting the source seems to work, but I don't want to do that.
Could anyone help?
You can simply change the path in the html tag to wherever you need:
<img src="../OTHER_FOLDER/IMAGE_NAME.png" />
The .. lets you move up one folder in the systems file hierarchy.
If your image is located in the folder one level up from the folder in which is index.html you can use
<img src="../image.jpg">
Else you can use absolute path:
<img src="C:\Users\your_user\picture.jpg"```
use ../ with src=""
like this
<img src="../pictures/pic.png" alt="Image 01">
<img src="../../pictures/pic.png" alt="Image 01">
My Relative Path to locate the image
<img src="D:\Projects\Food_Blog\Food_Blog\images\facebook-logo.png" alt="facebook-icon" />
My Folder Structure:
I am surely this is my correct path to where my facebook-logo.png is located at. I have no clue why it is not displaying in my web.
I'd recommend you not to use a full relative path, might be that tomorrow someone will change the directory's location and then nothing will work.
Do this:
<img src="../Food_Blog/images/facebook-logo.png" alt="facebook-icon" />
This will take you to the correct place, as it will go 2 levels up the hierarchy:
-Food_Blog
-Food_Blog
-images
-logo.png
Better is you use a class for this:
.imgLogo {
content:url("../Food_Blog/images/facebook-logo.png");
}
The CSS will complete your correct relevant path and use it like this:
<img class="imgLogo" alt="facebook-icon" />
This will provide maximum flexibility for your images and it's easier to maintain.
Don't give the full path . Give like this
<img src="..\images\facebook-logo.png" alt="facebook-icon" />
you can also provide your path like this
<img src="images\facebook-logo.png" alt="facebook-icon" />
Only if the "images Folder" exists in root of your Project.
with /images/ you can get directly to root directory Acccess
with ../ you can go 1 step back from your html file so with this if your html file is on root so you can use it like this ../images/IMAGENAME.jpeg
I'm sure this is super easy but I'm a beginner. I have my code to pull up my logo but my logo just pulls up a broken image icon. See screencast
See screencast: http://screencast.com/t/ar8cpTIbMs
Here is my HTML:
<div id="logo">
<img src="C:\Users\Brent\Documents\Website Development"/>
</div>
I really only need my HTML figured out and I assume the CSS will work pretty well after that. Thanks for the help!
You must enter the correct file name for src. Such as
<img src="C:\path\to\your\file.jpg" />
http://www.w3schools.com/tags/tag_img.asp
Please note that it is not a good practice to use absolute paths in your src attribute.
In the other hand, you can use base64 encoded image data as src of your img tag. Something like
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...//Z" />
https://www.base64-image.de/tutorial
If you use this method, you dont need to keep your logo.jpg file anywhere.
Hope this will help.
You are linking to a directory in your img tag, instead of an image file. Also, I would suggest either practicing online in a free webhost or downloading a stack package like WAMP/MAMP/LAMP. You'll start running into problems where you can use http protocols pretty quickly in your studies. Though, that can get technical, so I say stick to a free webhost for now. You will get weird hang ups trying to use the file system that will ultimately confuse you while you are trying to learn.
The problem lies in your src for your <img>. You're linking it to a directory /Users/Brent/Documents/Website Development right now, when you should be linking it to the image. If your image is called logo.png, then you should link it with C:\Users\Brent\Documents\Website Development\logo.png. Also, instead of linking it to C:\Users\Brent\Documents\Website Development\logo.png, link it to the image based on where the file is. For example, if your file is in \Website Development\index.html, then all you need to put for the src is "logo.png".
You should move your logo to the same path as your website. Ex:
Website: C:/site/index.html
Logo: C:/site/logo.jpg
Then include the logo as:
<div id="logo">
<img src="logo.jpg">
</div>
Hint: You don't have to have the div for the logo to show up.
please enter the complete path including your image.
for example if your file name is mypic.jpg .Then
<img src="C:\Users\Brent\Documents\Website Development\mypic.jpg" />
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.
I am currently doing an assignment for school and my teacher has sent all the project photos which I have saved. The only problem is they will not show up no matter what I try doing.
ex. the image is named "photo1.jpg" and I did:
<img src="photo1.jpg">
But the image will not load. if anyone has any suggestions I'd appreciate it.
If you mean on a webpage then the use this code to generate the image:
<img src="photo1.jpg"/>
Keep in mind that the photo1.jpg needs to be in the same directory as the file (webpage) calling it.
Check the location of the image. It should be in the same folder
<img src = "photo1.jpg" />
if it is not, and it has its own image folder inside your project you can do it like this
<img src = "imagesFolder/photo1.jpg" />
<img src="photo1.jpg"></img>
Don't forget that this links current page folder. If you have in eg. in images directory, then use
<img src="images/photo1.jpg"></img>