I am trying to learn HTML5 and I wrote a code in html to display the image.
Here is the code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<title>imageDemo.html</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>This is Pacman Ghost</h1>
<p>
<img src="Pacman.png" alt="Pacman Ghost" />
</p>
</body>
</html>
My image Pacman.png is on the desktop and my test.html file is also on the desktop. I am using gedit in ubuntu 14.04 to write the code. When i run my file test.html, I don't see the image but see Pacman Ghost as text.
What am I doing wrong here??
Hope to hear soon from you guys.
Thanks
You wrote that you image is on the desktop. You use an relative path. So the best way is to make a folder and put all your files in that folder.
Your code looks correct but i think your your image is in the wrong place.
And you should have a look at the case sensitivity of your file.
Use the debug bar in Chrome or Firefox and go to Network to find some problems and look if the code isn't loading.
Solution remove the space between filename and .png extension.
https://developer.chrome.com/devtools
Try not closing the tag and adding height and width of the image.
<img src="Pacman.png" alt="Pacman Ghost" style="width:100px;height:100px" >
Also check if the filename is correct. It might not be able to find your Pacman.png. Try to use an absolute link if possible.
Edit: Absolute path with ubuntu:
<img src="/home/(your user name)/Desktop/Pacman.png" alt="Pacman Ghost" style="width:100px;height:100px" >
Related
I would like to add the image present at this link http://startup.registroimprese.it/isin/search?0-IResourceListener-data-resultRow-22-resultViewPnl-companyCardContainer-logoImg&antiCache=1628599295826 to my html page. Therefore, I have added the above URL to the "src" attribute in the < img> tag. My HTML code looks like this:
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<img src="http://startup.registroimprese.it/isin/search?0-IResourceListener-data-resultRow-26-resultViewPnl-companyCardContainer-logoImg&antiCache=1628599295828">
</body>
</html>
However, the image is not displayed when I render the page, and this is what I see.
blank page
What I expect to see instead, is the image at the link correctly displayed on my html page. Any idea what is wrong and how I could fix it?
NOTE: I know I could download the image locally and then add it, but I specifically need to find a solution to add the image from the link, and not from a path on my local computer.
I'm learning HTML and I'm just starting to learn about an image manipulation. The image I want to use is in different directory of the document and I've tried to load it in my document. The directory of Html document is MY/COMPUTER/PATH/Desktop/Code/Images.html and the directory of an image is MY/COMPUTER/PATH/Downloads/Image.jpg and the code is that follows:
<!DOCTYPE html>
<html>
<body>
<img src="../../Downloads/Image.jpg" alt ="This is an image that should
work">
</body>
</html>
I would like to get some help from other people. Thanks.
It's a best practice to maintain the proper directory structure.
Here is the basic directory structure which you should follow, it will help you to gather all assets in the same place
>projectName
>assets
>images
>css
>js
>index.html
<!DOCTYPE html>
<html>
<body>
<img src="assets/images/image.jpg"
alt = "This is an image that should work"
>
</body>
</html>
>projectName
>assets
>images
>css
>js
>index.html
>about.html
>contact.html
No matter what I try, images won't display in my browser. I've made sure file names were matching, that the directories were correct, etc. I've tried different images just to see if anything will load.
Here is an example of my code. The image and index file are in the same folder. Can anyone help?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src=“rollingrick.jpg” alt=“Rick”>
</body>
</html>
i am struggling to add any images whatsoever to html, for them to show when i open in browser
i have tried different images, using them in the correct directories, relative and absolute url
i really do not know why im getting nothing to show...
<!DOCTYPE html>
<html>
<head>
<title> how to</title>
</head>
<body>
<div>
<img src="https://static1.squarespace.com/static/503264b0e4b0dbdecd41e3f6/t/590a05131e5b6ce08768b593/1493828890055/polaroid2.png"/>
</div>
</body>
</html>
even the image address copied won't show
any ideas???
As shown in the figure below, there is a special character in your url, causing the browser to treat it as a file on your server instead of on squarespace. Remove that, and your image should be displayed as normal.
<body>
<div>
<img src="https://static1.squarespace.com/static/503264b0e4b0dbdecd41e3f6/t/590a05131e5b6ce08768b593/1493828890055/polaroid2.png"/>
</div>
</body>
This seems to work, deleted first double quotes and then added it back
Or delete the first quotes and then the first h to be sure, then retype
I am working on a ASP.NET website and in a panel I show help descriptions.
These help descriptions are created by someone else in HTML.
Mostly its a paragraph and in one occassion there is an image.
Here it is going strang with FF.
the HTML is simple:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body style="font: 14px arial;">
<p>Make reservations on EMTU assets</p>
<img src="9901_files/image002.png" alt="" />
</body>
</html>
The page file tree is like:
root / requestdescriptions / 9901_files
The HTML file is in 'RequestDescriptions' and is called "9901.HTM".
The image is in the '9901_files' folder.
In IE and Chrome the image is shown. So no problem there.
Then there is FireFox.
If I look at the webconsole in FF, I notice that the image is not found as FF tries to get it from 'root/9901_files'. Why is it not looking in 'root/requestdescriptions/9901_files'???
rg.
Eric
Probably firefox is starting in the root when looking for an image. You could try adding ./ before the "file_src", so firefox starts in the same directory.
What if it says the following for your image code:
<img src="./9901_files/image002.png" alt="" />
Found it.
Thanks to Rober Deiman, I found that the calling link had a backslash instead of a forwardslash in the link.
Apparently FireFox doesn't correct it like Chrome and IE.