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 "'"
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
I'm using WampServer. Now I want to display and image that is not in www folder. It is located in C drive's Downloads folder. I want the users to select image from this folder and it should display it.
When I tried, it showed:
<img id="signphoto" src="../../../Users/Vikas/Downloads/dsds.png" />
this address and it's not working. The error was: GET http://localhost/Users/Vikas/Downloads/dsds.png 404 (Not Found)
How can I change it to work? Is there any way?
Actual source of image is: C:\Users\Vikas\Downloads\dsds.png
It would be a security vulnerability if the client could request local file system files and then use JavaScript to figure out what's in them.
The only way around this is to build an extension in a browser. Firefox extensions and IE extensions can access local resources. Chrome is much more restrictive.
If you use Google chrome browser you can use like this
<img src="E://bulbpro/pic_bulboff.gif" width="150px" height="200px">
But if you use Mozila Firefox the you need to add "file " ex.
<img src="file:E://bulbpro/pic_bulboff.gif" width="150px" height="200px">
IE 9 : If you want that the user takes a look at image before he posts it to the server : The user should ADD the website to "trusted Website list".
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.
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.