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.
Related
Almost every single time that I add an image in my code in VS code, it is broken in the browser.
I always make sure to have the image in the exact same folder as the rest of code, or in an images folder which I have in the same folder as the rest of my code, but it still does not work.
At the moment, my code looks like this:
<img src="/ae24874dd301843548c034a3d2973658.png" alt="" class="cat">
And the .png is in the same folder as the rest of my code files. Why does it still not show?
Edit: Ok so I "made it work" by opening it through the live server extension (by pressing Go Live, after first restarting the program). But if I try to open it through chrome the images are still broken. It is still weird to me...
As the image is in same folder, use this
<img src="./image.png" alt="" class="cat">
With / you start at the root of the Computer or Server. Try using a relative path.
On Windows / is C:\ drive. If you use a localhost like xampp the htdocs folder is the root.
Without the / your path will start at the same folder as your html
Try
<img src="ae24874dd301843548c034a3d2973658.png" alt="" class="cat">
or
<img src="./ae24874dd301843548c034a3d2973658.png" alt="" class="cat">
More about paths : https://www.w3schools.com/html/html_filepaths.asp
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 have a problem about playing mp3/mp4 in firefox and internet explorer, what difference between run a page including following code using double-click on it(file:///...) and run that using iis (http ://...)
<object data="../../Media/Music.mp3" width="200" height="150" type="audio/mpeg"></object>
when i double click on it file music or movie doesn't play, but when i open it using iis (http ://) music plays???
what's the difference? thanks all
You are most likely running into Same Origin Policy problem regarding file: URIs.
See this MDN reference:
For example, if you have a file foo.html which accesses another file bar.html and you have navigated to it from the file index.html, the load will succeed only if bar.html is either in the same directory as index.html or in a directory contained within the same directory as index.html.
Try moving your mp3 to a directory that is contained within the same directory as your HTML-file.
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.