Search code examples
reactjsimagebrowserwindow

Open image in the browser instead of downloading it

I have a React component (avatar) that display image and I when I click the image it downloads it to my local machine. I don't want this behavior; I want that when the image clicked it opens in the browser.

I used window.open and res.sendFile in the back-end.

<MDAvatar
  src={`${imageConstLink}/imagePayed/${order.paymentCheckImage}`}
  name={order.paymentCheckImage}
  size="xl"
  style={{ cursor: "pointer" }}
  onClick={() =>
    window.open(`${imageConstLink}/imagePayed/${order.paymentCheckImage}`, "_blank")
  }
/>
Solution

  • I think that you need to do is wrap your img in a a tag, where the src of your component is the href in the link. Something like this:

    export const MDAvatar = ({ src, alt }) => {
  return (
    <a href={src} target="_blank" rel="noreferrer">
      <img src={src} alt={alt} />
    </a>
  );
};

    Created a CodeSandbox so you can see it working.