在ReactJS中，在新标签页中打开pdf会触发浏览器的弹出式警告

Question

正在显示图像。单击图像时，应在新选项卡中打开pdf文件。这就是我试图渲染React组件的方法，不起作用 -

<a href={pdfUrl} target="_blank">
  <img className="class-image" src={imageUrl} onError={imgError}/>
</a>

点击图片后，Chrome会发出弹出窗口已被阻止的警告。 Safari甚至没有发出任何警告，只是吃了它认为是弹出窗口的标签。

我尝试删除onError属性但没有效果。

如果我删除target="_blank"属性，它可以正常工作，在同一窗口中打开pdf。

我尝试将onClick处理程序添加到<a>标记，使用window.open打开一个窗口，结果相同 - 生成警告弹出窗口已被阻止。

然而这很好 -

<a className="class-name" href={pdfUrl} target="_blank">{userName}</a>

如果不是将文本渲染为锚标记的内容而是渲染图像，则会出现问题。无法弄清楚。

修改

我让它像这样工作 -

<img className="class-image" src={imageUrl} onError={imgError} onClick={() => {functionThatOpensWindow()} }/>

1. 将onClick处理程序添加到img代码
2. 更新图像类以将指针更改为光标，使其看起来像链接

Answer 1

我让它像这样工作 -

<img className="class-image" src={imageUrl} onError={imgError} onClick={() => {functionThatOpensWindow()} }/>

1. 将onClick处理程序添加到img代码
2. 将图像类更新为 将指针更改为光标，使其看起来像一个链接

Answer 2

可能与此有关的一种方法是打开新窗口，然后填充URL：

const newWindow = window.open();
newWindow.location.href = '/some/url';