CODEWITHSUNDEEP
reactjsimagebrowserwindow
Bnw_Youcef
Bnw_Youcef

Reputation: 13

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")
  }
/>

Upvotes: 0

Views: 1224

Answers (1)

Thremulant
Thremulant

Reputation: 606

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.

Upvotes: 1

Related Questions