Image without extension in src not loading in IE alone, and works perfect in all other browers

问题

I have below HTML code:

<img title="hotelThumbImage" id="hotelThumbImage01" width="140px" height="129px" 
src="/b2c/images/?url=FixedPkgB2c/FF-252-325"/>

It renders in IE as below:

It renders in all other browser like FireFox and Chrome as:

Related question : How to make a Servlet call form UI which returns the Content itself and place an img tag using Script in the output?

回答1:

My project is suffering from this too, and it's because IE prevents download/display of files which have a different encoding than their extension. It has something to do with malicious code being able to be hidden as image files simply by changing the extension of the file.

Firefox and Chrome are smart enough to display it as an image so long as the encoding is that of an image, but IE takes no chances, it seems.

You'll have to add the extension that matches your image's encoding for it to display in IE.

Edit: It's also possible that your server is sending the file with a header denoting plain text. Again, Firefox and Chrome are smart enough to handle it, but IE isn't. See: https://stackoverflow.com/a/32988576/4793951

回答2:

Welcome to IE world... :(

---

What i would do, in order to have better control of the situation is to modify the getter method, so in Holiday.getPkgCode():

public String getPkgCode() throws IOException {
    if (!this.pkgCode.contains(".")) {
        String ext = ImgUtil.determineFormat(this.pkgCode);
        return this.pkgCode + ImgUtil.toExtension(ext);
    } else {
        return this.pkgCode;
    }
}

To use it you will need to catch exceptions and this ImgUtil class adapted from here:

class ImgUtil {

    public static String determineFormat(String name) throws IOException {

        // get image format in a file
        File file = new File(name);

        // create an image input stream from the specified file
        ImageInputStream iis = ImageIO.createImageInputStream(file);

        // get all currently registered readers that recognize the image format
        Iterator<ImageReader> iter = ImageIO.getImageReaders(iis);
        if (!iter.hasNext()) {
            throw new RuntimeException("No readers found!");
        }

        // get the first reader
        ImageReader reader = iter.next();
        String toReturn = reader.getFormatName();

        // close stream
        iis.close();

        return toReturn;

    }

    public static String toExtension(String ext) {
        switch (ext) {
        case "JPEG": return ".jpg";
        case "PNG": return ".png";
        }
        return null;
    }

}

---

TEST IT:

NOTE: I placed an image (jpg) without extension placed in C:\tmp folder

public class Q37052184 {

    String pkgCode = "C:\\tmp\\yorch";

    public static void main(String[] args) throws IOException {
        Q37052184 q = new Q37052184();
        System.out.println(q.getPkgCode());
    }

    // the given getter!!!
}

OUTPUT:

C:\tmp\yorch.jpg

回答3:

You have to set the Content Type property of responses' header in the servlet.

For example in spring 4 mvc,

@GetMapping(value = "/b2c/images/?url=FixedPkgB2c/FF-252-325")
public ResponseEntity<byte []> getImageThumbnail() {
    HttpHeaders headers = new HttpHeaders();
    headers.setContentType(media type));
    byte [] content= ...;
    return ResponseEntity.ok().headers(headers).body(content);
}

来源：https://stackoverflow.com/questions/37052184/image-without-extension-in-src-not-loading-in-ie-alone-and-works-perfect-in-all