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.">
Related
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' %}">
I'm trying to upload a particular image on my HTML. The image is in the same folder, the HTML file is also in the same folder. However, it still doesn't show me the image when I access the image on HTML.
The code for the image tag in HTML is:
<img src="Layout.jpg" alt="Layout">
Thanks in advance.
This will depend on your server. If your webpage is located at http://example.com/path/to/my/html, does the corresponding URL http://example.com/path/to/my/Layout.jpg work? It is possible that the server that you are using needs additional configuration to route the URL to the underlying image file. More details regarding your specific server / hosting platform would be needed to diagnose the issue.
I do a lot of off line programming.
Sometimes for example this path /a/b/c/d.html
to go backwards to an anchor at a/a.html
I frequently see ../ or ../../ what do they mean, how are they used?
how do I use them and not have to put the entire path of the website in,
if the main site is html.com
how do I use the folders without using html
example I want the anchor at a/a.html without using html.com/a/a.html
would this work the same to not have to use it? ../a/a.html
did not work in offline mode
explain please
so that I don't have to re write the links from offline to public html
and the sites name
../image.jpg means 'go up one directory and use image.jpg'
./image.jpg means use the image in this directory
/image.jpg means 'use the image from the root directory of the website'
So this example:
<img src"../../images/image.jpg" alt="an image">
Uses the image from 2 directory levels up and then go in the images directory and then use image.jpg.
That should get you started.
I have made a picture link with this code snip:
<a href='feed.php'><img src="C:\xampp\htdocs\Project\Icons\Feed.png"/></a>
But no picture appears on my page, why?
(I'm currently only using my page locally!)
It's because you (are trying to) use a local file reference.
Either use the relative path
or
<a href='feed.php'><img src="file:///C:/xampp/htdocs/Project/Icons/Feed.png"/></a>
Please be aware that if you plan to use this 'online' it will fail because of the LOCAL reference.
If you load the page through your webserver you should use:
<a href='feed.php'><img src="/Icons/Feed.png"/></a>
Or
<a href='feed.php'><img src="http://yoursite.local/Icons/Feed.png"/></a>
Or whatever the path to the image is.
I would prefer the relative path (the first) though which enables you to move your page to another domain without your links / images breaking.
You can't link local files from a remote web page. This is to prevent webpages from accessing files on the end-user's computer.
Change this: C:\xampp\htdocs\Project\Icons\Feed.png
To this: http://yourwebsitehere.com/Project/Icons/Feed.png
EDIT: Since you say its only used locally, then you need to use this instead:
file:///C:/xampp/htdocs/Project/Icons/Feed.png
Also, make sure the image is actually located where you think it is!
Try typing file:///C:/xampp/htdocs/Project/Icons/Feed.png into your browser's address bar and see what happens.
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