Retrieve image from FTP to webpage

Question

I have a folder in my ftp server which contains several images. I'm trying to access and show these images in a webpage like

<img src="ftp://my_ftp_ip_address/Images/imagename.jpg"/>

But it asks for an FTP username and password. How can I achieve this? Also is it possible to do the same using JSP?

Martin Prikryl · Accepted Answer · 2021-12-28T07:26:28.520

With the latest versions of web browsers (Chrome 59, Firefox 61), you cannot even use ftp:// URL to retrieve an image. And it was never a good solution anyway.

The correct solution is to route the image through your webserver, hiding away not only the credentials, but also the original source of the image.

Create a script (PHP or any other you use) that acts as an image source (you will use it in the <img src=...> attribute. The script will "produce" the image by downloading it from the FTP server.

The most trivial way to implement such a script in PHP (say image.php) is:

<?

header('Content-Type: image/jpeg');

echo file_get_contents('ftp://username:password@ftp.example.com/path/image.jpg');

(you need to URL-encode the credentials, if they contain reserved symbols – you can use urlencode).

And then you use it in the HTML like:

<a src="image.php" />

(assuming the image.php is in the same folder as your HTML page)

The script uses FTP URL wrappers. If that's not allowed on your web server, you have to go the harder way with FTP functions. See PHP: How do I read a file from FTP server into a variable?

Though for a really correct solution, you should provide some HTTP headers related to the file, like Content-Length, Content-Type and Content-Disposition. For this, see Download file via PHP script from FTP server to browser with Content-Length header without storing the file on the web server.

In practice, you will likely have more images, so you will not have the file name hard-coded in the script, but the script will take the name as a parameter.
See List and download clicked file from FTP

I like this because it solves the problem of using ftp and avoids moving images to other locations. — youcantryreachingme, May 21 '18 at 23:35

score 2 · Answer 2 · answered Jun 18 '13 at 12:52

2

You are telling the browser to access the images using the ftp protocol, this is why it is trying to login.

Change ftp:// to http:// (or https:// if using ssl) to access the images.

You can offcourse also add the username and password to the image, but this way everyone can look at your code and login to your ftp server... not really secure ;)

answered Jun 18 '13 at 12:52

Pinoniq

1,365
9
13

But my webpage is private hosted in my localhost. – mpsbhat Jun 18 '13 at 13:00
so? That is no excuse in not doing it correctly. Use http(s). Or file:// if you dont have a webserver installed locally – Pinoniq Dec 01 '15 at 09:32

score -7 · Answer 3 · answered Jun 18 '13 at 12:51

-7

You can try to modify your src attribute like this:

<img src="ftp://username:password@my_ftp_ip_address/Images/imagename.jpg"/>

answered Jun 18 '13 at 12:51

Alexandre Vinçon

919
5
13

7

But then you'd be giving everyone your ftp password. – developerwjk Dec 02 '14 at 22:04
8

Please do not use this on a live site. – syncdk Dec 07 '14 at 01:01
1

I am not able to show the image in browser from ftp server using the above way. I am getting the issue of blocked:origin in the network request. Is there any other way to do the same ? – Lalit Dashora Jun 21 '18 at 08:55
1

Modern browsers won't load images from `ftp://` - For example Chrome does not support this since version 59: https://www.chromestatus.com/feature/5709390967472128, Firefox since version 61: https://bugzilla.mozilla.org/show_bug.cgi?id=1404744 - Use the [solution from my answer](https://stackoverflow.com/a/47152898/850848). – Martin Prikryl Oct 18 '18 at 07:32

Retrieve image from FTP to webpage

3 Answers3

Linked

Related