<img src="fax.jpg" alt="icon" width="20" height="20">
Both the image and the file are in same directory.
The path to the file is:
public_html/content/theme/data/file.php
and the path to the image is:
public_html/content/theme/data/image.jpg
So, what is the issue? It only displays the alt value icon.
change the src to the location of the image you would like to use, in your case image.jpg(and not fax.jpg)
<img src="image.jpg" alt="icon" width="20" height="20">
There are many reasons why this is occuring, you need to open up Chrome Inspector or Firefox Firebug and view the console, refresh the page and read what it tells you as to why the image is not loading. From what you've shown it seems that image.jpg is not fax.jpg, which would explain it.
Below are some common reasons that would cause this failure to connect, most won't apply to you but they'd be good for reference:
1) Check the spelling of you image file(s). Check that the file referenced in the src= part of the <img> tag exists and is the correct file name.
2) Check the cASe of your image file(s). Particularly if you're running this on a Linux/Apache server, which are case sensitive so fax.jpg and Fax.jpg are seen as different files.
3) Check that CHMOD (Permissions) of your image file(s), make sure they're accessible to the public. Typically at least 0644.
4) If on an Apache server check if there is an .htaccess file in the path structure (so, in any folder between public_html and the image file) that has any rules either rewriting the access or denying the access to the image file.
5) Check if your Content Security Policy is correctly configured to accept self as a reference, such as img-src: 'self' .
6) If your website is https but you're referencing files with an absolute URI using http then as a security measure most browsers will not show them by default.
7) The file is not a valid image/JPG file and can not be displayed by the browser because of this.
8) Hard refresh your browser with CTRL + F5 to force it to check if content exists rather than using a possibly out-of-date cache.
But I go back to what I stated at the start, you can use Firebug in Firefox or Chrome Inspector to get a solid reason why the image file does not show. That's the solution you should use. My list above is simply a list of maybes and I have no way of saying which is more -or less- likely.
Give the full path to your image eg http://yoursite/content/theme/data/image.jpg
Don't use public html
Path to image should be
$path = './image.jpg';
or if u using local path, u can fix it by that code
$path = str_replace("\\","/",html_entity_decode($path));
Related
I am trying to load an image locally onto my html. I first tried serving an image path through a /images/ folder, but that did not work. I then tried serving images with the whole path to the image like <img src="/Users/code/src/code/go/src/websites/website/website-Bucket.png" alt="test"> but I still had no luck. I checked my html and it has no errors. I have restarted my PC, changed the image to .jpg, and it still did not want to work. I get an error in Safari - An error occurred while trying to load the resource and the image shows as a blue box and question mark. What things would you try to troubleshoot?
Extra - I am using goLang to serve the files. I have it so a http.handleFunc() goes off and serves the images folder when it is requested. The path is showing http://localhost/images/theImage.png "the correct path" but nothing happens. So, I save the image and it shows it as a html and shows a section of the page?? Would that be a path thing?
In first instance you have to understand the path source, when you are on a HTML file, your path inside the file should be :
<img src="images/website-Bucket.png" alt="test">
that's because :
the path of your .html file can access trough files the inside path with the "/folder/file" structure route in the html file, so your structure files should be:
yourfiel.html (your file render on browser) /imagesfolder
-website-Bucket.png" (you call it on your html as
/imagesfolder/website/Bucket.png)./
you can learn more about paths here :
http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
Looks like it may be a file path issue.
Take a look at this page it has a good example.
https://www.w3schools.com/html/html_filepaths.asp
Also try renaming the image with a _ and not use the -.
Open Console in any browser and see if you see any errors that mention not being able to find the source path of the picture.
It should give you a hint of where your browser is trying to find that img.
All of your guy's responses were correct. I had the correct path. It was a Golang thing. I did not make a handlefunc when the server wants the /image.png. It was never serving the image, it just was doing nothing with it. Thank you for the responses.
I use Sublime Text 3.0 to code html-based website. As indicated by my username, I'm not much of an expert. I'm having trouble adding an image with sublime text 3.0 using the latest google chrome browser version 44.0.2403.130 m and I run windows 8.1 pro (still waiting for the upgrade to w10 Dx) anyway, I'm pretty sure my software isn't the problem. I can upload images using a externally linked image such as
http://www.examplesite.com/picture.gif
and it will appear but when I try to upload from my own directory as such
<h1><img src="Logo.jpeg" alt="Logo"/>Prespective News</h1>
It will not show up on my web browser, it just shows the alternate text of Logo, is there something wrong with my code? Please help me, I've spent at least 4 hours. trying to figure it out! also it's all my pictures, not just 1.
The image is in the same directory as my HTML file is. When I do the F12, it shows an error:
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///C:/Users/Owner/Documents/My%20Web%20Sites/Website%202/Logo.jpeg
This is confusing because this is exactly where my file is in:
C:\Users\Owner\Documents\My Web Sites\Website 2\Logo.JPEG
The html file is in
C:\Users\Owner\Documents\My Web Sites\Website 2\idk yet.HTML
The img src URL you provided was probably incorrect. If you open chrome dev tools (F12) you should be able to see (on the network tab) where the image source you are trying to fetch is. Then you can compare it to the path your image actually resides.
Things you can do:
Check if the name matches the one you provide exactly (case sensitive)
Remember the sources you link are relative to your page, so if you put it in a folder it might need to be src="images/Logo.jpeg"
You might be using jpg instead of jpeg, please check that also.
When coding a website you should keep all the required images in a separate image folder and use the source address appropriately.
Suppose you have an image folder in your current working directory then use
img src="image/logo.jpg" />
The reason for this error is your image not found in your specific folder.
Provide correct folder name for the image path. This issue can be easily solved. Use Firebug or F12 keys for troubleshooting.
I usually put my images in a folder aside to the html file so in the same directory
<img src="images/image.jpg" alt="image" title="image of an image" /> <h1>Titre1</h1>
Try it this way maybe. I would seperate the title h1 from the image.
If it doesn't show up it's because Logo.jpeg isn't in the same directory. Since your file name is Logo.JPEG it should be:
<h1><img src="Logo.JPEG" alt="Logo"/>Prespective News</h1>
Capitalisation matters.
I found out what I was doing wrong. Turns out the file is a JPEG but for some reason it's extension is .JPG not with an E. I'm not sure why it's not listed as a .JPEG since the file type is JPEG, anyway thank you for your responses ya'll! I probably wouldn't have figured it out if I wasn't responding and looking at the picture information xD
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.
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.
I'm loading an image on the page with a 'file:///some_dir/image.jpg' src path. I can access the image in a regular tab using this path. Also, saving the page as HTML and using this path for the image works. However, the image does not load on the live page. In chrome it shows part of the alt text, and in firefox it shows a narrow strip. I have tried changing width and height but to no avail. Is there something I'm missing?
<img title="Click to enlarge" src="file:///Users/Aram/uploads/profile.image.985b0f707d972bf3.4372696242656464696e67616e645465657468696e67437269625261696c436f7665722e6a7067.jpg" class="profile-image">
EDIT:
I noticed I am getting this in the console:
Not allowed to load local resource
Is there any way around this?
EDIT 2:
Since I could not access the image through an http path, I have decided to read it in as base64 data. For anyone else using web2py or another Python framework:
# Load the image data
import os
path = os.path.join(request.folder, 'uploads', filename)
data_uri = open(path, 'rb').read().encode('base64').replace('\n', '')
data = 'data:image/png;base64,%s' % data_uri
return html.IMG( _src=data, _class='profile-image', _title='Click to enlarge' )
Websites are not allowed to use local files on the user's computer. Use a relative path to from the html file's directory.
You can also encode and embed the image directly:
How to embed the encoded stuff: http://www.sweeting.org/mark/blog/2005/07/12/base64-encoded-images-embedded-in-html
Python Encoding Instructions: http://www.daniweb.com/software-development/python/code/216635
The problem is you are trying to load a file directly off of a clients computer. Browsers prevent this.
You can read about the exact details here:
http://en.wikipedia.org/wiki/Same_origin_policy
It is called the Origin Policy. It prevents malicious sites from directly loading files off of a clients computer. Try using a relative path from your page to display the image.
In some situations (rare) I've used a light web server to host the site so that I could load the files from the server (as opposed to having it load off of what the browser sees, as a clients computer).