Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Open image in new tab/window without triggering download

I am trying to open an image in a new tab using this simple code.

window.open(file.url);

The file is a .jpg file and my browser is Chrome. Instead of showing the image in a new tab it triggers the download window and asks me to download it to my PC.

Is this a javascript issue? Or is it a default Chrome setting? I have googled this for a while and some people are suggesting it could be a MIME type problem but I have no control over the image coming from the server.

Any advice would be appreciated.

like image 947
jonhobbs Avatar asked Jul 06 '16 23:07

jonhobbs


People also ask

How do I get an image to open in new tab instead of download?

When you right click on the image you need to select then 'Open image in new Tab' from the drop down and NOT 'Open link in new tab' this will then open the image in a new tab.

How do I force an image to open in a new tab?

Press the ctrl button while you click the image, it opens the image in new tab.

How do I open a PDF in a new tab or window instead of downloading HTML?

You can make the link open in a new window by adding target="_blank" . The question if the PDF file is opened in the window or downloaded depends on the software the user has installed, i don't think it is possible to control that.

How do I open an image in a new window in HTML?

Sometimes we may want the linked page to open in a new browser tab or window. To do this we add target="_blank" in the first section before > . We can do this for both an image or text link. That's it – how to add a text link, image and an image link in HTML.


1 Answers

As suggested by @Lachlan Walls in the comments, you can open a blank tab and write a simple html with an img tag:

const image_window = window.open("", "_blank")
image_window.document.write(`
      <html>
        <head>
        </head>
        <body>
          <img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" alt="Example" height="100%" width="100%">
        </body>
      </html>
`);
like image 171
Muhammed B. Aydemir Avatar answered Nov 29 '22 07:11

Muhammed B. Aydemir