在浏览器中打开图像而不是下载它

Question

我有一个显示图像的 React 组件（头像），当我单击图像时，它会将它下载到我的本地计算机。我不想要这种行为；我希望当图像被点击时它会在浏览器中打开。

我在后端使用了window.open和res.sendFile。

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

Answer 1

我认为您需要做的是将 img 包装在 a 标记中，其中组件的 src 是链接中的 href。是这样的：

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

创建了一个CodeSandbox，所以你可以看到它在工作。