Why are images shown on server but not on localhost?

Question

An image is shown correctly when uploaded to the deployment server, via the following HTML.

<img width="516" height="730" class="theCanvas img-fluid" style="transform-origin: 50% 50%;
transition:transform 200ms ease-in-out; cursor: move; transform: matrix(1, 0, 0, 1, 0, 0);"
draggable="false" src="../uploads/Scans/uploadedImage.jpg">

But the image is not displayed when running the application from localhost (Eclipse, Tomcat) and uploading the image from there.

It is not displayed even if I edit the source (via F12 development tools to edit the src tag)

http://localhost:8080/contextRoot/uploads/Scans/uploadedImage.jpg

Nor is it displayed even if I try and give the complete source to where the file is located in Eclipse

C:\Users\myUser\eclipse-workspace\contextRoot\uploads\Scans\uploadedImage.jpg

(Although I think this last issue is due to cross-domain issues, as if I try and do change the src attribute using jquery then I get 'Access Denied')

Any ideas?

Is this because of the `file-delimiter` being different in Windows and the server? — ghost, Aug 18 '20 at 14:09
The deployment server is linux based. I did try different combinations of / and \ though to try and solve the problem. — gordon613, Aug 18 '20 at 14:17
Just a suggestion - Could you replace `\ ` with `\\ ` in the Windows deployment? This actually caused me problems with Python in Windows. — ghost, Aug 18 '20 at 14:20
What URI is that path relative to? Is "uploads" set to be deployed (it's not under the default `WebContent` folder)? — nitind, Aug 18 '20 at 14:39
@ntind Both "uploads" and "WebContent" are sub-directories of the context root. — gordon613, Aug 18 '20 at 16:36
@ghost Thanks. Changing '\' to '\\' does not help. See also what I wrote about cross-domain issues in my updated question. — gordon613, Aug 18 '20 at 16:39

score 0 · Accepted Answer · answered Sep 23 '20 at 13:43

The following doesn't answer the question as to why the local environment and the server should work differently, but it does provide a working solution. (code based on Ali Irawan's solution )

Write a servlet to retrieve the image, and then display the image using code such as

$('#image').attr("src","display?id="+result);

The servlet would be defined in web.xml

 <servlet-name>DisplayServlet</servlet-name> 
     <servlet-class>com.web.DisplayServlet</servlet-class> 
    </servlet>

    <servlet-mapping> 
     <servlet-name>DisplayServlet</servlet-name> 
     <url-pattern>/display</url-pattern> 
    </servlet-mapping>
    <servlet>

The servlet would look something like

public class DisplayServlet extends HttpServlet {

    /**
     * 
     */
    private static final long serialVersionUID = -7598483378197199569L;
    

         
    
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        
        String id = SecurityIssues.paramEncode(request.getParameter("id"));
        response.setContentType("image/jpeg");
        
        String fileFullPath = "C:\exampleDir\" + id + ".jpg";
        
        File my_file = new File(fileFullPath);

        // This should send the file to browser
        OutputStream out = response.getOutputStream();
        FileInputStream in = new FileInputStream(my_file);
        byte[] buffer = new byte[4096];
        int length;
        while ((length = in.read(buffer)) > 0) {
            out.write(buffer, 0, length);
        }
        in.close();
        out.flush();
    }
}

Why are images shown on server but not on localhost?

1 Answers1