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).
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.
<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));
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.
Still working on my personal web server, I was trying to use the html5 audio and video tags within Nitrogen.
As there is no #audio nor #video records, I decided to insert html text directly in the page generated by nitrogen, the result looks like this:
<audio controls preload="metadata"><source src="../../My Music/subdir/song.ogg" type="audio/ogg" /source>audio tags not supported</audio>
In my understanding this should work because the audio tag is supposed to be interpreted directly by the client browser, and there is not any nitrogen id or event observer in the code.
But when I browse this code from Firefox, I briefly see the control opening, and then the audio element simply disappears.
If I copy paste the whole code generated by nitrogen (display html source page, copy and paste in a file located at the origin of the nitrogen project) and open it with the browser, it works fine. The relative path is correct, assuming that the search stats in nitrogen project. I have tried absolute path also, without success.
I don't know
if it builds a file name of the form ".._.._My music_subdir_song.ogg" like nitrogen does for url analysis,
or if it uses another directory to start the path,
or if it simply doesn't work the way I am thinking.
...
Edit: some complementary information:
I have done the following changes:
create one directory including some ogg files in the site/static directory + move a static test.html file in the site/static. If I open directly test.html -> ok. if I redirect from my web site -> Not ok.
same test with a copy of the directory at the Nitrogen application root and access from my web site -> not ok
As the information on the web page is ambiguous, I modified test.html to access to a file that does not exist on my PC -> same behavior.
I think I'll use the debugger to understand how the request is managed, to be continued...
Edit 2:
using the debugger I can verify that the wf_core:run_catched() is called several times. The fist call is when it process the event in my page that redirect to the static file.
The second time to process the static html file itself.
A third time to process finish_static_request() with a Path equal to my_music/song.ogg, and then I get lost in the processing of the answer. Another wf_core:run_catched() was called in parallel, but I didn't follow it...
I have been able to verify that the file can be accessed: I have added several audio tag in the html files, and I was able to "download" the existing files using the DownloadHelper Firefox plugin.
My understanding now is that the path is correct (at least when I place the files in a subdirectory of site/static), the server is able to retrieve the files and send them, the browser recognize the audio and video tags, but the link between the embedded audio/video reader and the files is lost, although I have added a type definition inside the audio tag.
Any idea to continue?
Edit 3:
Finally I got it. As Chops suggest it I had to go in the inets server configuration, not to define the path, but to define the type association. I have added the following definitions in etc/inets_httpd.erlenv, and it works.
{mime_types, [
{"css", "text/css"},
...
{"ogg","audio/ogg"},
{"webm","video/webm"}
]}
:o)
Based on the contents of the url attribute ("../../My Music/subdir/song.ogg"), the problem, when it's served from Nitrogen is that the request (Assuming you're using the default 127.0.0.1:8000) for the audio will be to the url "http://127.0.0.1:8000/My Music/subdir/song.ogg"
What you want to to do, if you're using the standard Nitrogen installation, is to put the song files you want into the site/static directory, perhaps in "songs" subdirectory.
Then change the url attribute to be "/songs/mysong.ogg" (or whatever path within site/static you used).
Note: Dependinding on your server choice (Webmachine, for example), you may need to tinker with the server's specific config file to tell it to handle the new directory for static paths, for help, check the configuration docs on the Nitrogen site.
Beyond that, there's nothing special about outputting raw HTML in Nitrogen. It is my understanding that the problem here is really just related to the paths of the requests being sent to the server.
I have a file uploader but it's not showing the files path (so you can only upload files that are in the same folder)
How can I make it so show's the files path (desktop/something/yes/dog.swf)
It's getting more common that browsers doesn't reveal the local path where the uploaded file was selected, and this is for most purposes a good thing. If you upload a file to a site you probably don't want any excess information to be sent along, like for example your local user name.
For you as an application developer it should not make any difference. You shouldn't rely on the local path of the file for anything. If you use the local path on the server side also, you open up a horribly wide security hole. Anyone could for example upload a file with the path "c:\windows\explorer.exe", and if you save the file there you are in trouble...
If I'm reading this right, that's a client side browser issue, and not something you can set in your code.
It's also browser-specific, so we would have to know the browser version to tell how to do it on YOUR browser, and that would do nothing for other people accessing the web site via their browser.
If you want to ask how to set it on your browser, I would recommend that you ask that on the Super-User site. (See the links at the bottom of this page.)
Did you try to upload a file from another folder? I've noticed that no path is shown but it still works just fine.