html - 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:password@ftp.example.com/path/image.jpg');

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