Why Won't My Images Display? Feel like I've tried everything - 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>

Related

How to add image in HTML from a link?

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.

Processing does not show up in webpage

I have a processing program which I want to display on a browser in an html file. I found an instruction on https://cs.nyu.edu/~kapp/cs101/processing_on_the_web/. It still does not show up in my webpage. I also tried it with the same code from the instruction and it still does not show up. I am using chrome and my html code looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Bitmap?</title>
<script type="text/javascript" src="processing.js"></script>
</head>
<body>
<h1>Text</h1>
/* #pjs preload="Karte_schweiz_zentriert.jpg","bitmap_zentriert.jpg"; */
<canvas data-processing-sources="bitmap_map_comparison.pde"></canvas>
</body>
</html>
I have the .html file, processing.js, the two .jpg pictures and the bitmap_map_comparison.pde processing code in one folder called bitmap_map_comparison.
Does anyone know where the problem is?
You are using src incorrectly. Unless you have ProcessingJS in the exact same folder as the program, it will not import as it does not exist. Use this instead:
<script src="https://cdn.jsdelivr.net/processing.js/1.6.6/processing.min.js"></script>
Edit: I'm just now realizing that I'm 3 years late and this probably won't help anyone.

can't add image to 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

HTML showing a broken image

I know the question has been asked a million times, but I just can't find any explanation to the following issue: I've inserted an image in my code, and when I open the page in my browser, I'm just having a broken link.
Here is my code:
<!doctype html>
<html>
<head>
<title>Laura Caroline’s Portfolio</title>
<link href=“/teststyle.css” type=“text/css” rel=“stylesheet”/>
</head>
<body>
<h1>About me</h1>
<p><img src=“portrait.jpeg”/></p>
</body>
</html>
The photo is in the same folder than the page. I've double checked the name.
I'm on MacOS Sierra (if of any help). Oh, and I'm a beginner :) Any clue about where to look to fix this?
Thanks!
As I can see make sure it's in the same directory. Try adding './file.jpg'
About the quotation marks they don't really look like the standard ones. So try replacing that with ""

html5 img not displayed in gedit

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" >