Why won't my images from my computer show up in my html file I had no issue using images from the web using the url. I saved my html file, css and images all in on folder but it doesn't show up on the website. This is the code I used using Sublime Text Editor.
<div>
<img src="/images/profile-pic.jpg"/>
<h1 id="myname">John Smith</h1>
<h3>Web developer</h3>
<p>{{ pause and ponder }}</p>
</div>
</div class="intro">
Another easy way to do this.
Go to your files on your system, navigate to the folder where your image is stored right click and click properties then copy out the address there.
Just give a correct path of the image in the html file and remove the forward slash (/) behind the path.
Most likely you're in a new directory and need to come back up one level. You could try:
<img src="../images/profile-pic.jpg"/>
Now on folder structure, this is how you arrange your documents.
First create a folder for your entire website. Let's call it "Codes"
Then in codes add the HTML file and name it "index"(easier for the browser to recognize when hosting) the along side the index create another folder for your additional material. Example images, font files, CSS files,videos and lot more. Name the folder asset. Then in asset, create a folder for keeping the images only, another for CSS files and another for font files.
Then you are done
Copy address from the first folder created( this is easier)
Now you provided screenshots, I can try to help better. In the folder tree, you can see folder named Portfolio and folder named Images are on same level. Because of this, when you are inside of folder Portfolio, you should navigate one level up.
Please try to use
<img src="../images/profile-pic.jpg">
Related
web page with my uploaded image here
I was trying to find the path my computer was using. I tried the basic code that
I learned in a program I'm currently in, but it didn't seem to work. The path is desktop/my-skillcrush-project/101-skillcrush-project-images/images-icons/html-icon.png
The program directed to download the zip file of the image on my computer and create a folder. With the root directory associated with the file including the image.Then to use this code. <img src="img/html-icon.png" alt="HTML icon"/ (closing tag disappears when I try to type it. Sorry, it's in my code.) and that was it. It seems too simple in my opinion. How should the files be saved so that it will show up??????
What is wrong
The problem is, in the src, you put a relative path. In HTML, a relative path is a path without a slash(/) at the beginning. So, HTML was expecting a folder called desktop in the 101-skillcrush-project-code folder which had all of the other folders and the image.
What you should do
You do not need to put the full(absolute) path for the image. You can put the relative path. That is, relative to where the index.html is located.
Solution
So, in the src of the image, you can put 101-skillcrush-project-images/image-icons/HTML Icon.png.
More Info
HTML File Paths on W3 Schools
HTML File Paths on GeeksforGeeks
It definitely is much easier if you make a clear structure for all of your html assets. That also makes it much easier to handle your paths. So for example start with a root folder - lets name it html, where you put all your html pages in. Inside html create a sub folder for e.g. for your images and css. Folder structure can look like that:
/html image path from html folder: <img src="img/html-icon.png">
|- img save "html-icon.png" here
|- css
|- js
|- fonts
|- etc
To access an image from another folder e.g. css folder, you first have to go one level up with .. and then, go into the img folder. e.g. <img src="../img/html-icon.png">
If you have your images somewhere outside your "web folder" the paths can get a pain. So just organize your assets - it is much more effective and much easier for you to find and work with it.
I need to link to files in my domain. I don't want to use the full https://my-domain.com/dir-1/file.gif
Assuming the file isn't in a subdirectory under my current page but is in another subdirectory off somewhere. How do I link to it with minimal coding?
There's a lot of info on the web about html links but usually after one basic example they diverge off into coding colored links or css.
This may also be an irrelevant question but is there any way I can have a unique page identifier and link to that page even if it's location or name changes? I do not want to use another #$%^&?! CMS system.
Say your index file is in the root directory, and you want to link to that gif in your dir-1 directory, you'd need to use dir-/file.gif as your url.
If as an image:
<img src="dir-1/file.gif" />
I'm creating a small website for university. I'm totally new in web dev and got a problem i can't find the answer for. I was searching similar topics for some good time now but i cant the solution.
It´s important to note, that i access this website with localhost:8080/index for example. So the website is not "online". To start the site i have to go inside the folder and cmd -> npm start
We also use Handlebars (if this is somehow important), so pretty much every file is .hbs
My problem is
<img src="index.jpg" alt="index">
is just not working. It only displays the alt "index" on the page. When i use an global img url (like from wikipedia) its showing me the image. But not when i use "own" images. I was trying diffrent pictures, diffrent names, diffrent locations for the picture but it won't load.
When i use the inspector inside Firefox or Chrome it tells me img don't load(this is translated from germany, i don't know what it tells in english)
impressum.hbs and the picture are inside the same folder
I was copying the picture into every folder but still, it won't load.
You may also doublecheck that the pic is .jpg and not .jpeg, which happens sometimes.
So your index.html and your picture are in the same exact folder?
<img src="picture.jpg"> picture.jpg is located in the same folder as the current page
<img src="images/picture.jpg"> picture.jpg is located in the images folder in the current folder
<img src="/images/picture.jpg"> picture.jpg is located in the images folder at the root of the current web
<img src="../picture.jpg"> picture.jpg is located in the folder one level up from the current folder
The solution was an "internal" Problem. The univeristy gives us a framework and somehow you only can access pictures when they are saved inside 1 special folder. So it´s solved. Still i dont understand why they dont tell us this information directly...
How would you proceed to add a picture to a website (in html or css) from your own computer?
I know how to add a picture using a url but what if the picture is stored in a folder on my computer and not on the internet?
<img src="path/to/image/image.png">
You only have to give the location of the image, use as reference the .html location.
Exs.:
<img src="image.png">
if your image is in the same folder of your html file.
<img src="../image.png">
if your image is outside of folder where your html file is and so on.
When you do that, you are going to be the only one able to access your page. If you want other people to see it you should be stored in a public folder in your web server. Look for XAMPP if you are a windows user.
If the website is hosted on your computer then you can use your images stored on your computer.You can use <img> html tag to display image.
Otherwise if it is on some remote server, then you will need a static ip and a server on your computer to host images to remote server. It is not possible to have have server on remote internet location and images on local.
If website is on internet then copy the image to server and provide path.
You can using the img tag to do this
https://jsfiddle.net/moongod101/dh55b4rz/
PS: I'm the creator of Codepenimg
Let’s pretend we have an image of a car on our computer saved as “funny-dog.jpg” and we want to insert it into a webpage; this is the code we would use:
<img src="funny-dog.jpg">
Let’s analyze this code. First, is the code for creating an image element. Next, the letters “src” are used as an attribute and stand for “source”. Basically, we need to provide the web browser with a value to the source of the image. Naturally, the value for the source attribute is “funny-dog.jpg”. This example assumes your image file is located in the same directory as your HTML file. If, for example, you had your image file inside a folder named “images” your code would look like this:
<img src="images/funny-dog.jpg">
There is one additional bit of code we must add before we are finished. We must assign an “alt” attribute and value to our image. The “alt” attribute stands for “alternative” and is used to provide a text-based alternative for viewers incase the image will not load, or if they are visually impaired. Here is what our code will look like:
<img src="funny-dog.jpg" alt="A funny dog sitting on the grass.">
I'm new to HTML and I had a question about accessing files with pictures.
I know that, to access the pictures that are within other folders, the code looks something like what is shown below and my HTML file would be right before the pictures file:
<img src="pictures/mountain.jpg" alt="mountain"/>
My question is: how do I access pictures that are placed in files that are outside of my HTML file? How do I link a picture but backwards through a file that is the file that holds these files?
Do you mean going up a folder?
<img src="../pictures/mountain.jpg" alt="mountain"/>
Also, if you wanted to go up an additional folder you would do this:
<img src="../../pictures/mountain.jpg" alt="mountain"/>
The files you want to refer to in a html file, being images or other html files or JavaScript files, must be within the root of your server. So if the root of your server is c:\users\httpserver and you want to link to an image in c:\users\kristy\pictures\mountain.jpg, the answer is that it is not possible, you will need to copy the file to a Directory within c:\users\httpserver and link it either relatively, as ketchupisred showed or absolutely.
i.e if the html-file is located in c:\users\httpserver\html and the picture is c:\users\httpserver\pictures\mountain.jpg, either
<img src="/pictures/mountain.jpg" alt="mountain"/>
note the starting / that refers to the root of the server or
<img src="../pictures/mountain.jpg" alt="mountain"/>
the .. taking you one Level up before going into the pictures folder
Since going up one or two folders has already been explained, I'll just add that if you want to access a file in the root directory you can do this:
<img src="/pictures/mountain.jpg" alt="mountain"/>