如何链接图像并定位新窗口答案

【问题标题】：How to link an image and target a new window如何链接图像并定位新窗口
【发布时间】：2021-08-27 21:10:23
【问题描述】：

我有一张图片，如果我点击该图片，如何构建图片参考，以便在新标签页或显示图片的浏览器的新窗口中打开另一个页面？

【问题讨论】：

标签： html

【解决方案1】：

<a href="http://www.google.com" target="_blank">
  <img width="220" height="250" border="0" align="center"  src=""/>
</a>

【讨论】：

如果您正在构建将使用 Rotativa 转换为 PDF 的文档，则特别需要 align="center" 部分。
不知何故目标属性在 StackOverflow 配置文件中不起作用。添加后，图片不再超链接

【解决方案2】：

如果你使用脚本导航到页面，使用open方法和目标_blank打开一个新窗口/标签：

<img src="..." alt="..." onclick="window.open('anotherpage.html', '_blank');" />

但是，如果您希望搜索引擎找到该页面，则应该将图像包装在常规链接中。

【讨论】：

onclick="window.open(this.src, '_blank');"

【解决方案3】：

<a href="http://www.google.com" target="_blank"> //gives blank window
<img width="220" height="250" border="0" align="center"  src=""/> // show image into new window
</a>

查看代码

【讨论】：

【解决方案4】：

假设您要显示一个 50x50 像素的图像缩略图并链接到您可以执行的实际图像

<a href="path/to/image.jpg" alt="Image description" target="_blank" style="display: inline-block; width: 50px; height; 50px; background-image: url('path/to/image.jpg');"></a>

当然最好给那个链接一个class或id并把它放在你的css中

【讨论】：

【解决方案5】：

你可以这样做

<a href="http://www.w3c.org/" target="_blank">W3C Home Page</a>

找到这个页面

http://www.corelangs.com/html/links/new-window.html

戈雷布

【讨论】：

【解决方案6】：

要在新标签页中打开，请使用：

target = "_blank"

要在同一选项卡中打开，请使用：

target = "_self"

【讨论】：

【解决方案7】：

试试这个简单的解决方案

<a href="path/of/your/image/image.png" target="_blank">
    <img src="path/of/your/image/image.png" alt=""
        style="width: 37rem;max-width: 100%;height: auto;vertical-align: 
        middle;border-style: none;">
</a>

观看直播https://codepen.io/awaisaslampro/pen/abwOPrP

【讨论】：