How do I use a non online picture (no www.sth.com/image) in my HTML (or in CSS) site?
Normally when I use a picture I do <img src="link of image"> but how do I use a picture that I have locally on my computer?
If, for example, your image is in the directory images/image.png, relative to the HTML file
You would use <img src="images/image.png" />. This will work both online and locally.
If you are accessing the page locally then use relative URLs
If you are hosting the page on a server and visiting it yourself, then you could try to use file:// scheme URIs but you might find yourself blocked by browser security restrictions (which don't allow webpages to fiddle with user's local disks). You'd be better off hosting the image over HTTP.
If you are hosting the page on a server and letting other people visit it, then you must host the image over HTTP. Your website visitors do not, and should not, be able to access your local hard disk.
You can just enter the path of the file on your computer for the src attribute.
For example, if your image is in C:/files/image.jpg, just use <img src="C:/files/image.jpg' /> and you can also use relative paths.
But, note that this only works on your local machine and will generate a 404 error on other machines that don't have the image in the exact same location.
Related
just wondering how to fix the img src = "" problem. Im using atom.io and i'm trying to display a .jpeg photo for my website i'm making.
That's a security feature that shouldn't be disabled. It's to stop pages from accessing your local file system and using the data present.
What you should do is install a development server:
Atom Live Server
Chrome Web Server Extension
And make sure that all your resources are in your project folder
--MyAwesomeWebsite
|-index.html
|-photos
|-pic1.jpg
That way your img tag would use relative addressing
<img src='../photos/pic1.jpg'>
Assuming the above image is loaded from index.html
You can switch to relative paths and load these images without issue. For example, rather than this:
<img src="file:///Users/[...]/birdie.jpeg" />
Switch to this:
<img src="birdie.jpeg" />
This works because birdie.jpeg appears to be in the same folder as your HTML file, index.html.
If you had your images in a sub-folder, you would still use a relative path:
<img src="photos/birdie.jpg" />
change
<img src="'../Photos/birde2.jpeg">
to
<img src="Photos/birde2.jpeg">
you have added extra "'"
Here's the scenario: I have two machines on a LAN network. One of them is acting as a web server. When the second, client machine browser (Firefox) makes a request from the server, it sends the following html
<!DOCTYPE HTML>
<html>
<body>
<img src="C:\Users\General\Desktop\map1.jpg" align="middle">
</body>
</html>
The image however is not displayed. I have tried the following variations to the img tag:
<img src="C:/Users/General/Desktop/map1.jpg" align="middle">
<img src="file:///C:/Users/General/Desktop/map1.jpg" align="middle">
<img src="http://localhost//file:/C:/Users/General/Desktop/map1.jpg" align="middle">
Funny thing is if I view the page source and save the html content to a local file and open it in the browser it works. The exact same html code does not work when fetched from the server, but works when opened on the local machine.
Please note that I'm trying to load the image off the client machine because it is impossible to store an image on the server machine in my scenario. (The server is actually an Arduino Mega without an SD card)
In most recent browsers, links to local files ( file:/// ) do not open, for security purposes. In your case, the browser does not display an image that resides on a file on your hard disk. This reason also explains why it works when you save your page locally.
For starter, you need to add the runat="server" attribute.
If that doesn't suffice, then:
you should change
<img src="http://localhost//file:/C:/Users/General/Desktop/map1.jpg"/>
to something like
<img src="http://localhost/General/Desktop/map1.jpg"/>
or even better to
<img src="~/General/Desktop/map1.jpg"/>
which targets the root of the application (you would need to move your image in that directory)
A html page cannot request images from the client host. It must be stored on the server, or in another remote location.
If you are using Arduino you can:
Use embedded css and images. In result you will got whole page by one browser call
Add additional logic to process browser requests for getting css and jpg files from SD card filesystem of Arduino
it can be solved like this:
.img-class
{
background-image:url("../../resources/myImage.jpg");
width: 100%;
height: 100%;
}
<img className='img-class'/>
I am reading a JPG file from a local directory and when I render the web page, it does not show the image.
I do not want to move this image in the project directory. I want to keep it as-is in the local directory.
This is what I have:
<img src="file://C:/dir1/dir2/filename.jpg" alt="Smiley face" width="500" height="400"/>
I'm using IE to display the web page. What do I do?
The absolute path is from your root web directory, not your file directory:
<img src="/images/filename.jpg" alt="Smiley face" width="500" height="400"/>
If that file is not inside your root web directory or a subdirectory thereof you won't be able to view it in your HTML (without the help of server side code).
You might still get away with images. But as far as I know, you cannot load files from local disk. This would be a massive security breach as a webpage could load anything it wanted from your hard drive.
You will need a small webserver to load external assets...
here is a great explanation why...
You still can do something like that, but you will need server side code that would evaluate the request and serve the content of the file to the client with the appropriate MIME type. The file:/// URIs always refer to the client local file system, so the server would not even receive such a request.
I apologize for my poor English since it's not my mother lang.
I'm a newbie in web development. When I open my HTML page by clicking index.html, everything shows up correctly in my browser. But when I open via [http://localhost/SOME_DIR/SOME_DIR/index.html], the browser only shows some [div] frames and plain text. My CSS style and pics are all missing.
In WAMP, I've checked the Localhost and phpinfo() pages, both OK.
Maybe I need to open certain Apache services?
I don't know where goes wrong.
<base href="C:/wamp/www/StrangeAttractor/" target="_blank">
should be
<base href="/StrangeAttractor/" target="_blank">
You are loading the site over HTTP but you are trying to set the <base href> to your local disk. There are two problems with this:
You are using a plain file path but you have to specify the scheme (file://) in order to switch protocol
Security restrictions limit what resources web pages served over the network are allowed to load from the local disk
The solution: Load all your content over HTTP.
I have a web application.
I have inserted an image into my web application homepage using html tags.It is working very well in server machine. But when any client is accessing my web page everything that is present in the homepage of the web application is displayed except the image. Instead of image cross mark is displayed in client machine.
Can anybody help me how to display the image in client machine.
Check the path in the src attribute in the img tag. Make sure it's a relative path, and not hard coded to path on your hard drive.