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?

Answer 1

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:[email protected]/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

Answer 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 ;)