Why is my picture in html not popping up on my browser - html

I'm trying to put this image I have saved in this location:
C:\Users\Administrator\Desktop\HTML docs\Lab 02\images
to put on my html code here:
<body>
<img src="C:/Users/Administrator/Desktop/HTML docs/Lab 02/images/logo.gif" alt="Sintok Pizza Order Form Logo" width="300" height="268">
</body>
And, yes, as you can see on the code, the image is named logo.gif
But the image doesn't show up on my browser, what am I missing here? Please point out my errors, thanks!

Prepend the path with file:///
file:///C:/Users/Administrator/Desktop/HTML docs/Lab 02/images/logo.gif
Better way is to use relative paths. Assuming your html-file is in
C:/Users/Administrator/Desktop/HTML docs/Lab 02/
You should use
images/logo.gif
as your path.

us file path like
file:///C:/Users/Administrator/Desktop/HTML docs/Lab 02/images/logo.gif
In these cases open file with any browser and the copy the path used by browser is a shortcut to test the path

You have been using the local computer path. Which is wrong. You need to use the web path.
See This : C:/Users/Administrator/Desktop/HTML docs/Lab 02/images/logo.gif
This is pointing to your C: drive which is only accessible from your computer not others. you need to put up the image path as something like
./images/logo.gif

Related

Can you download a file from homepage using localhost?

I have this a tag <a href="/assets/test.docx" download>Download</a>. According to W3schools it seems like I have setup right path to access file test.docx form CV.vue according to folder structure in the picture below. Please check and verify that I have right path.
I want to test download the file when running website in Chrome on localhost. When I click download I get error saying Failed, no file
What am I doing wrong?
Folder structure
Generally if you put slash(/) behind of your path in href, it will going to main domain of website and it doesn't matter it's localhost or real domain like example.com.
So if you find your path or file structure easily you can put that in href parameter.
For example your logo path is:
src/assets/logo.png
*Remember that you can test it by enter you path on your browser to find your correct path.
for example:
localhost/src/assets/logo.png
OR
127.0.0.1:8000/src/assets/logo.png
If it's working correctly, you can put that on your html code like this:
Download
The answer is simple just remove the forward slash in front of "assets". Your code should be:
<a href="assets/test.docx" download>Download</a>
The html download attribute will add this extra slash so your code as it exists now leads to the following path.
file:///assets/0513211459.jpg.html

HTML won't load images

So I have this HTML code:
<img src="C:\Users\Nico\Documents\Sublime\Proyecto Tics\templates\logo.png" width="30" height="30">
I've tried several things to make it work but it just won't load the image, the file path is correct and when I open the HTML file and get the image path then put it into chrome it opens the image perfectly. I've also tried using "logo.png" as the source but it wouldn't work either when I copied the image path it wasn't correct so ended up specifying the whole path. Whatever I specify as path doesn't seem to load.
Don't use file system absolute path in html.
Refer HTML File Paths
C:\ is not an actual path naming convention. It is just something Google Chrome has, try using a relative path.

Html Image will not load under any change - Golang

I am trying to load an image locally onto my html. I first tried serving an image path through a /images/ folder, but that did not work. I then tried serving images with the whole path to the image like <img src="/Users/code/src/code/go/src/websites/website/website-Bucket.png" alt="test"> but I still had no luck. I checked my html and it has no errors. I have restarted my PC, changed the image to .jpg, and it still did not want to work. I get an error in Safari - An error occurred while trying to load the resource and the image shows as a blue box and question mark. What things would you try to troubleshoot?
Extra - I am using goLang to serve the files. I have it so a http.handleFunc() goes off and serves the images folder when it is requested. The path is showing http://localhost/images/theImage.png "the correct path" but nothing happens. So, I save the image and it shows it as a html and shows a section of the page?? Would that be a path thing?
In first instance you have to understand the path source, when you are on a HTML file, your path inside the file should be :
<img src="images/website-Bucket.png" alt="test">
that's because :
the path of your .html file can access trough files the inside path with the "/folder/file" structure route in the html file, so your structure files should be:
yourfiel.html (your file render on browser) /imagesfolder
-website-Bucket.png" (you call it on your html as
/imagesfolder/website/Bucket.png)./
you can learn more about paths here :
http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
Looks like it may be a file path issue.
Take a look at this page it has a good example.
https://www.w3schools.com/html/html_filepaths.asp
Also try renaming the image with a _ and not use the -.
Open Console in any browser and see if you see any errors that mention not being able to find the source path of the picture.
It should give you a hint of where your browser is trying to find that img.
All of your guy's responses were correct. I had the correct path. It was a Golang thing. I did not make a handlefunc when the server wants the /image.png. It was never serving the image, it just was doing nothing with it. Thank you for the responses.

Trying to add an image in HTML?

I use Sublime Text 3.0 to code html-based website. As indicated by my username, I'm not much of an expert. I'm having trouble adding an image with sublime text 3.0 using the latest google chrome browser version 44.0.2403.130 m and I run windows 8.1 pro (still waiting for the upgrade to w10 Dx) anyway, I'm pretty sure my software isn't the problem. I can upload images using a externally linked image such as
http://www.examplesite.com/picture.gif
and it will appear but when I try to upload from my own directory as such
<h1><img src="Logo.jpeg" alt="Logo"/>Prespective News</h1>
It will not show up on my web browser, it just shows the alternate text of Logo, is there something wrong with my code? Please help me, I've spent at least 4 hours. trying to figure it out! also it's all my pictures, not just 1.
The image is in the same directory as my HTML file is. When I do the F12, it shows an error:
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///C:/Users/Owner/Documents/My%20Web%20Sites/Website%202/Logo.jpeg
This is confusing because this is exactly where my file is in:
C:\Users\Owner\Documents\My Web Sites\Website 2\Logo.JPEG
The html file is in
C:\Users\Owner\Documents\My Web Sites\Website 2\idk yet.HTML
The img src URL you provided was probably incorrect. If you open chrome dev tools (F12) you should be able to see (on the network tab) where the image source you are trying to fetch is. Then you can compare it to the path your image actually resides.
Things you can do:
Check if the name matches the one you provide exactly (case sensitive)
Remember the sources you link are relative to your page, so if you put it in a folder it might need to be src="images/Logo.jpeg"
You might be using jpg instead of jpeg, please check that also.
When coding a website you should keep all the required images in a separate image folder and use the source address appropriately.
Suppose you have an image folder in your current working directory then use
img src="image/logo.jpg" />
The reason for this error is your image not found in your specific folder.
Provide correct folder name for the image path. This issue can be easily solved. Use Firebug or F12 keys for troubleshooting.
I usually put my images in a folder aside to the html file so in the same directory
<img src="images/image.jpg" alt="image" title="image of an image" /> <h1>Titre1</h1>
Try it this way maybe. I would seperate the title h1 from the image.
If it doesn't show up it's because Logo.jpeg isn't in the same directory. Since your file name is Logo.JPEG it should be:
<h1><img src="Logo.JPEG" alt="Logo"/>Prespective News</h1>
Capitalisation matters.
I found out what I was doing wrong. Turns out the file is a JPEG but for some reason it's extension is .JPG not with an E. I'm not sure why it's not listed as a .JPEG since the file type is JPEG, anyway thank you for your responses ya'll! I probably wouldn't have figured it out if I wasn't responding and looking at the picture information xD

Cannot see the image of my HTML file

Whats going wrong with my explorer or mozilla. I used the
<img src="path"/>
but the pic cannot be seen, when i open my html file. It just opens an empty box at that place.How do i make it through? I cannot display my pictures in my html file.Could you tell me which version of explorer supports it?
Make sure that your file is really named how you think it is. If you have "Hide known extensions" enabled, disable it and check again. Also, check if the extension in the path is the same case as the files. I once had a problem where images would not display in IE because of the image extensions being in upper case.
where is your HTML file and where is your image file ?
lets suppose your HTML file is anywhere and your image is in the same directory then you can give it path src="image.extension".
better you should check it in the same directory. Thanks
Make sure your path is correct.
If the image is in the same folder as your html file, then it should just be
<img src="image_name.jpg" />
If you reference your images from another folder, you will need to place the proper path in there. Depending on the file structure, it could be something like
<img src="/images/image_name.jpg" />
<img src="../images/image_name.jpg" />
<img src="../../images/image_name.jpg" />
Also check that you have
spelled the file and folder names correctly
used the right upper- and lowercase letters (this can be problem for file name extensions, like .jpg vs .JPG)
actually saved the file in the place it is supposed to be