how to display a image into web page - html

I want to display an uploaded images into my web page.For doc files i used file_get_contents for displaying the data(not displaying exactly) but in case of images i dont have any idea.Plz tell me

There are two possible solutions.
For the first one to work, your image has to be accessible via your web-server (i.e. be in a sub-directory of your document root) ; then, you just have to use an <img> tag that points to that image :
<img src="sub-directory/your-image.jpg" alt="my image" />
Of course, up to you to adapt the path to the image ;-)
If you image is not in a public diretory, you cannot use that technique, as your web-server will not be able to serve them.
In this situation, you'll have to use some PHP script to serve the image, and call that PHP script using an <img> tag :
<img src="serve-image?php.id=1234" alt="your image" />
Or like this :
<img src="serve-image.php?img=my-image-name.jpg" alt="your image" />
And this serve-image.php script will just :
send the right HTTP Content-type header -- see the header function.
and send the content of the image -- see the readfile function.
Of course, note that you should ensure that this script will not accept to serve any file from your server : it should only serve files in the directory that contains images !
For instance, using something like this should not be permitted (the script should return, for instance, a 404 error) :
<img src="serve-image.php?img=../../../etc/passwd" alt="trying to be bad" />

Use <img> tag in your code.
It will display the require image in your web page .
In image tag , you need specify the image path.
<img src="/home/pavunkumar/my_img.gif" alt="Not able to bring out" >
Here , alt attribute is used to say message , when the image is not able to display in the page because of some other issues, such as size,etc.

are u storing the image as a file or as a binary data?
if file,
use HTML IMG element.
if binary,
read the bytes and create the image using php gdlibrary
follow this
your image url in the db should be relative to your document root
use in your html or php
you need to make sure the directory structure is appropriate. bcoz there are some limitations on how many files can be stored in a directory. for this, create some directory structure based on first two digits some thing like that. store this even in db table. your db table should have filename, relative path , directory structure.
try it and let me know

The simple way is to use
the border, width a

Related

Why is my html image scr searching into the url instead of my directory?

I have an html file in which I would like to display an image called plot.png with the line <img src="plot.png" alt="Stock price vs. predictions graph">. On my website, I only see the alt text, meaning that my image did not load properly. In my command prompt output I see that I have a get request to /mysite/home/AAPL/plot.png, which is extremely frustrating because this means that when I search for the image this code is just placing it in the url (which is localhost../mysite/home/AAPL). I have tried putting plot.png in the same working directory as my html file as well as trying the absolute path to plot.png starting with C:, but nothing seems to get the search out of the url. Please help, thanks!
If it helps, im using Django
You can put the image in the same working directory (in the same folder as your html file) and then use
<img src="./plot.png" alt="Stock price vs. predictions graph">
The "./" is important as it signals that the image is in the current folder.
You could also use a website like www.linkpicture.com to generate a link to host your image and then use that link in your img
Some web browsers automatically disable images from loading. Fixing this could be as simple as selecting “show all images” from the browser's settings menu. It's also worth checking if the device you're using has security software or extensions that could block images.
Again you can use this tag for .png type photo
<img src="exampel.end">
//use extension type .end instead of .png
I forgot to mention that I was using the Django framework and the html templates work much differently than regular html files do. In Django you must put the image in a static folder and then call if with Jinja like so: <img src="{% static 'mysite/image.PNG' %}">

How to add your own picture on html?

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

Image path doesnot working in YII framework?

Here I have one sub domain and folder in following URL buyjapon.This is website is belong Yii framework.
basically,we called image path as <img src="/images/usd_C.jpg" /> .I create folder in my domain in migrate into that folder, then i want to call image src just like that <img src="/images/usd_C.jpg" /> but it will not show image properly.
I have include base href in head tag
<head>
<base href="http://demo.osiztechnologies.com/buyjapon">
</head>
Note: When i call image src like this <img src="buyjapon/images/usd_C.jpg" /> it will shown correctly. but i want to change entire website by adding buyjapon in image src.
How to call this..Please guide me..
If your URL's to pages do not require the /buyjapon folder name to be present, then one option would be to create an image controller, that opens up the requested image from the images folder, and outputs it to the data stream. I do this in situations where different translations of the same image are required for different users.
However, it looks like maybe your webserver is not set up correctly - if you are using apache have you set up a virtual host for your website? That will probably solve all your issues. Look here: http://httpd.apache.org/docs/2.2/vhosts/examples.html and at your current virtualhost setup to see what to do.

making an absolute url referencing a local image

How do I to make an absolute URL that refers an image into my root repertory app ?
I've tried this using /projetForum/WebContent/images/angry.gif as URL but it doesn't work.
str = str.replace(":D", "<img src=\"/projetForum/WebContent/images/angry.gif\" title=\"heureux\" alt=\"heureux\" />");
Thanks in advance.
When looking closer at the URL which you attempted to use, the presence of /WebContent folder is suspicious. This is recognizable as default web content folder name of a typical Eclipse web project. This in turn suggests that you actually used a local disk file system path relative to the IDE workspace root folder in the <img src> and somehow expected that it represents a valid URL.
This is wrong. It's the webbrowser who has got to download the image by a valid URL once it encounters the <img> element while parsing the obtained HTML output. It's not the webserver who has got to magically inline the image's content based on local disk file system path or so. That's not how HTML works.
Provided that the webapp's context root is projectForum (and thus the whole webapp is available on http://localhost:8080/projectForum/), then the image should be available on the following URL http://localhost:8080/projectForum/images/angry.gif. Try it in your browser's address bar first.
Once you found out the right URL, then you should substitute exactly that absolute/relative path in the image's URL so that the generated HTML output ends up like this:
<img src="/projectForum/images/angry.gif" />
By the way, the smiley :D does not look like angry to me.

how do I fix the HTML img tag to display an image

I'm trying to display to the enduser an image, but this tag wouldn't work, how can I fix it please ?
<img src="file:///E:/images/avatars/21082013184506Id.png" height=70 width=70 />
Thanks in advance.
your file addressing is absolute, It works just on the machine which that image exists on that directory, you should use implicit addressing.
as John asked in the comment, the image will only appear when the source path specified is available to user viewing the html.
The attribute src="file:///E:/images/avatars/21082013184506Id.png" means the user must have access to E: drive.
If you want this to work online on the internet, upload the image with your page and specify path to it e.g. in case it is in same folder as you html
src="21082013184506Id.png"
if it is in images/avatars subfolders
src="images/avatars/21082013184506Id.png"
I would also recommend quoting the width/height attributes i.e. width="70" height="70", or even better set those values via CSS, but that a different topic :)
End users will not have access to your hard disk.
Some browsers block access to images on file:// URIs from pages loaded over HTTP.
Use an HTTP URI for your src.
The image in src="" is on your own hard disk.
Upload the image to a image-uploader like imageshack or a webserver.
Put in src="" the correct path to the file.